github.com/cnotch/ipchub@v1.1.0/demos/flv/index.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  
     4  <head>
     5      <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
     6      <title>flv.js demo</title>
     7      <link rel="stylesheet" type="text/css" href="demo.css" />
     8  </head>
     9  
    10  <body>
    11      
    12      <div class="mainContainer">
    13          <div>
    14              <div id="streamURL">
    15                  <div class="url-input">
    16                      <label for="sURL">Stream URL:</label>
    17                      <input id="sURL" type="text" value="http://127.0.0.1:1554/streams/test/live3.flv" />
    18                      <!-- <button onclick="switch_mds()">Switch to MediaDataSource</button> -->
    19                  </div>
    20                  <div class="options">
    21                      <input type="checkbox" id="isLive" onchange="saveSettings()" />
    22                      <label for="isLive">isLive</label>
    23                      <input type="checkbox" id="withCredentials" onchange="saveSettings()" />
    24                      <label for="withCredentials">withCredentials</label>
    25                      <input type="checkbox" id="hasAudio" onchange="saveSettings()" checked />
    26                      <label for="hasAudio">hasAudio</label>
    27                      <input type="checkbox" id="hasVideo" onchange="saveSettings()" checked />
    28                      <label for="hasVideo">hasVideo</label>
    29                  </div>
    30              </div>
    31              <div id="mediaSourceURL" class="hidden">
    32                  <div class="url-input">
    33                      <label for="msURL">MediaDataSource JsonURL:</label>
    34                      <input id="msURL" type="text" value="http://127.0.0.1/flv/7182741.json" />
    35                      <button onclick="switch_url()">Switch to URL</button>
    36                  </div>
    37              </div>
    38          </div>
    39          <div class="video-container">
    40              <div>
    41                  <video name="videoElement" class="centeredVideo" controls autoplay>
    42                      Your browser is too old which doesn't support HTML5 video.
    43                  </video>
    44              </div>
    45          </div>
    46          <div class="controls">
    47              <button onclick="flv_load()">Load</button>
    48              <button onclick="flv_start()">Start</button>
    49              <button onclick="flv_pause()">Pause</button>
    50              <button onclick="flv_destroy()">Destroy</button>
    51              <input style="width:100px" type="text" name="seekpoint"/>
    52              <button onclick="flv_seekto()">SeekTo</button>
    53          </div>
    54          <textarea name="logcatbox" class="logcatBox" rows="10" readonly></textarea>
    55      </div>
    56  
    57      <script src="flv.js"></script>
    58      
    59      <script>
    60          var checkBoxFields = ['isLive', 'withCredentials', 'hasAudio', 'hasVideo'];
    61          var streamURL, mediaSourceURL;
    62  
    63          function flv_load() {
    64              console.log('isSupported: ' + flvjs.isSupported());
    65              if (mediaSourceURL.className === '') {
    66                  var url = document.getElementById('msURL').value;
    67      
    68                  var xhr = new XMLHttpRequest();
    69                  xhr.open('GET', url, true);
    70                  xhr.onload = function (e) {
    71                      var mediaDataSource = JSON.parse(xhr.response);
    72                      flv_load_mds(mediaDataSource);
    73                  }
    74                  xhr.send();
    75              } else {
    76                  var i;
    77                  var mediaDataSource = {
    78                      type: 'flv'
    79                  };
    80                  for (i = 0; i < checkBoxFields.length; i++) {
    81                      var field = checkBoxFields[i];
    82                      /** @type {HTMLInputElement} */
    83                      var checkbox = document.getElementById(field);
    84                      mediaDataSource[field] = checkbox.checked;
    85                  }
    86                  mediaDataSource['url'] = document.getElementById('sURL').value;
    87                  console.log('MediaDataSource', mediaDataSource);
    88                  flv_load_mds(mediaDataSource);
    89              }
    90          }
    91  
    92          function flv_load_mds(mediaDataSource) {
    93              var element = document.getElementsByName('videoElement')[0];
    94              if (typeof player !== "undefined") {
    95                  if (player != null) {
    96                      player.unload();
    97                      player.detachMediaElement();
    98                      player.destroy();
    99                      player = null;
   100                  }
   101              }
   102              player = flvjs.createPlayer(mediaDataSource, {
   103                  enableWorker: false,
   104                  lazyLoadMaxDuration: 3 * 60,
   105                  seekType: 'range',
   106                  // my change config
   107                  fixAudioTimestampGap: false, 
   108                  enableWorker: true,
   109                  enableStashBuffer: false,
   110                  stashInitialSize: 128,// 减少首桢显示等待时长
   111              });
   112              player.attachMediaElement(element);
   113              player.load();
   114          }
   115  
   116          function flv_start() {
   117              player.play();
   118          }
   119  
   120          function flv_pause() {
   121              player.pause();
   122          }
   123  
   124          function flv_destroy() {
   125              player.pause();
   126              player.unload();
   127              player.detachMediaElement();
   128              player.destroy();
   129              player = null;
   130          }
   131  
   132          function flv_seekto() {
   133              var input = document.getElementsByName('seekpoint')[0];
   134              player.currentTime = parseFloat(input.value);
   135          }
   136  
   137          function switch_url() {
   138              streamURL.className = '';
   139              mediaSourceURL.className = 'hidden';
   140              saveSettings();
   141          }
   142  
   143          function switch_mds() {
   144              streamURL.className = 'hidden';
   145              mediaSourceURL.className = '';
   146              saveSettings();
   147          }
   148  
   149          function ls_get(key, def) {
   150              try {
   151                  var ret = localStorage.getItem('flvjs_demo.' + key);
   152                  if (ret === null) {
   153                      ret = def;
   154                  }
   155                  return ret;
   156              } catch (e) {}
   157              return def;
   158          }
   159  
   160          function ls_set(key, value) {
   161              try {
   162                  localStorage.setItem('flvjs_demo.' + key, value);
   163              } catch (e) {}
   164          }
   165  
   166          function saveSettings() {
   167              if (mediaSourceURL.className === '') {
   168                  ls_set('inputMode', 'MediaDataSource');
   169              } else {
   170                  ls_set('inputMode', 'StreamURL');
   171              }
   172              var i;
   173              for (i = 0; i < checkBoxFields.length; i++) {
   174                  var field = checkBoxFields[i];
   175                  /** @type {HTMLInputElement} */
   176                  var checkbox = document.getElementById(field);
   177                  ls_set(field, checkbox.checked ? '1' : '0');
   178              }
   179              var msURL = document.getElementById('msURL');
   180              var sURL = document.getElementById('sURL');
   181              ls_set('msURL', msURL.value);
   182              ls_set('sURL', sURL.value);
   183              console.log('save');
   184          }
   185  
   186          function loadSettings() {
   187              var i;
   188              for (i = 0; i < checkBoxFields.length; i++) {
   189                  var field = checkBoxFields[i];
   190                  /** @type {HTMLInputElement} */
   191                  var checkbox = document.getElementById(field);
   192                  var c = ls_get(field, checkbox.checked ? '1' : '0');
   193                  checkbox.checked = c === '1' ? true : false;
   194              }
   195  
   196              var msURL = document.getElementById('msURL');
   197              var sURL = document.getElementById('sURL');
   198              msURL.value = ls_get('msURL', msURL.value);
   199              sURL.value = ls_get('sURL', sURL.value);
   200              if (ls_get('inputMode', 'StreamURL') === 'StreamURL') {
   201                  switch_url();
   202              } else {
   203                  switch_mds();
   204              }
   205          }
   206  
   207          function showVersion() {
   208              var version = flvjs.version;
   209              document.title = document.title + " (v" + version + ")";
   210          }
   211  
   212          var logcatbox = document.getElementsByName('logcatbox')[0];
   213          flvjs.LoggingControl.addLogListener(function(type, str) {
   214              logcatbox.value = logcatbox.value + str + '\n';
   215              logcatbox.scrollTop = logcatbox.scrollHeight;
   216          });
   217  
   218          document.addEventListener('DOMContentLoaded', function () {
   219              streamURL = document.getElementById('streamURL');
   220              mediaSourceURL = document.getElementById('mediaSourceURL');
   221              loadSettings();
   222              showVersion();
   223              // flv_load();
   224          });
   225      </script>
   226      
   227  </body>
   228  
   229  </html>