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

     1  <!DOCTYPE html>
     2  <html lang="en">
     3  <head>
     4      <meta charset="UTF-8">
     5      <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
     6      <meta name="renderer" content="webkit">
     7      <link rel="shortcut icon" href="https://www.ksyun.com/assets/img/static/favicon.ico" type="image/x-icon">
     8      <title>h265 web player</title>
     9      <meta content="h265, 直播SDK，点播SDK，金山云，视频云，视频播放，KLS，KVS，Kingsoft，KingCloud, Playback, player" name="keywords">
    10      <meta content="h265.js是金山云的Web端视频播放器，仅支持h265视频编码和AAC音频编码的flv格式的直播和点播视频。支持IE9及以上现代浏览器。本SDK隶属于金山云视频云解决方案" name="description">
    11      <style>
    12          .mainContainer {
    13              display: block;
    14              width: 1024px;
    15              margin-left: auto;
    16              margin-right: auto;
    17          }
    18  
    19          .urlInput {
    20              /* display: block; */
    21              /* width: 100%; */
    22              width:920px;
    23              margin-left: auto;
    24              margin-right: auto;
    25              margin-top: 8px;
    26              margin-bottom: 8px;
    27          }
    28  
    29          .centeredAudio, .centeredVideo {
    30              display: block;
    31              width: 100%;
    32              /* height: auto; */
    33              margin-left: auto;
    34              margin-right: auto;
    35              margin-bottom: auto;
    36              /* display: none; */
    37          }
    38  
    39          .controls {
    40              display: block;
    41              width: 100%;
    42              text-align: left;
    43              margin-left: auto;
    44              margin-right: auto;
    45              margin-top: 8px;
    46              margin-bottom: 10px;
    47          }
    48  
    49          .logcatBox {
    50              border-color: #CCCCCC;
    51              font-size: 11px;
    52              font-family: Menlo, Consolas, monospace;
    53              display: block;
    54              width: 100%;
    55              text-align: left;
    56              margin-left: auto;
    57              margin-right: auto;
    58          }
    59          .options{
    60              margin-bottom : 6px;
    61              font-size : 13px;
    62          }
    63      </style>
    64  </head>
    65  <body>
    66  <div class="mainContainer">
    67      <input name="265urlinput" class="urlInput" type="text" value="http://127.0.0.1:1554/streams/test/live1.flv"/>
    68      <!-- <input name="265urlinput" class="urlInput" type="text" value=""/> 196525_VtTnv_480p-->
    69      <canvas id="videoDisplayCanvas" width="960" height="540" style="border: 1px dashed;">
    70          <!-- <canvas id="videoDisplayCanvas" width="960" height="540" style="border: 1px dashed;"></canvas> -->
    71          Your browser is too old which doesn't support HTML5 canvas
    72      </canvas>
    73      <audio name="audioElement" class="centeredAudio" controls>
    74      <!-- <audio name="audioElement" class="centeredAudio" controls autoplay style="display:none;"> -->
    75          Your browser is too old which doesn't support HTML5 audio.
    76      </audio>
    77      <div class="controls">
    78          <button onclick="flv_load()">Load</button>
    79          <button onclick="flv_start()">Start</button>
    80          <button onclick="flv_pause()">Pause</button>
    81          <button onclick="flv_destroy()">Destroy</button>
    82          <input style="width:100px" type="text" name="seekpoint"/>
    83          <button onclick="flv_seekto()">SeekTo</button>
    84      </div>
    85      <textarea name="logcatbox" class="logcatBox" rows="10" readonly></textarea>
    86  </div>
    87  
    88  <script src="./h265.min.js"></script>
    89  
    90  <script>
    91      var player, logcatbox = document.getElementsByName('logcatbox')[0],flvLoad = false,paused = false;
    92      var audioElement = document.getElementsByName('audioElement')[0];
    93      var urlInput = document.getElementsByName('265urlinput')[0];
    94      var canvas = document.getElementById('videoDisplayCanvas');
    95      var videoElement = document.getElementsByName('videoElement')[0];
    96      var baseUri = location.protocol+'//'+location.host+'/';
    97  
    98      function flv_load() {
    99          if (typeof player !== "undefined") {
   100              if (player != null) {
   101                  player.destroy();
   102                  player = null;
   103              }
   104          }
   105  
   106          player = h265js.createPlayer({
   107              isLive: false
   108          }, 
   109          {
   110              maxLength4ToBeDecodeQueue: 7 + 30 * 30, //待解码NALU队列最大长度 (fps * s) 7 + 30 * 30
   111              maxLength4ToBeRenderQueue: 200, //待渲染frame队列最大长度 (720p每帧2M，1080p每帧3M) 200
   112              enableYUVrender: true,
   113              enableSkipFrame: false, 
   114              disableStreamLoader: false,  
   115              lazyLoadMaxDuration: 3 * 60,
   116              seekType: 'range',
   117              wasmFilePath: baseUri+'demos/flv265/libqydecoder.wasm',
   118              url: urlInput.value,
   119              timeToDecideWaiting: 500,       //暂停多久算卡顿, 默认500ms
   120              decodingCapacityInadequateDuration: 10,  //解码能力不足持续的时间，默认10s
   121              threshold4decodingCamacityIndequte: 0.8,     //实际fps统计值／码流fps < threshold4decodingCamacityIndequte, 持续decodingCapacityInadequateDuration秒，则判定为解码能力不足
   122              bufferTime: 500,     //启播前缓冲视频时长（ms）
   123              token: '30ed827e0ccbdbf5642a3f0f8f092f12'
   124          },{
   125              audioElement: audioElement,
   126              canvas: canvas,
   127              videoElement: videoElement
   128          });
   129          
   130          if (player) {
   131              
   132              player.on(h265js.Events.READY, function(event, data){
   133                  // console.warn('ready: ', event, data);
   134                  flvLoad = true;
   135                  paused = false;
   136                  player.load();
   137                  //safari浏览器audio标签需要主动触发才可播放
   138                  // if (browser_detect('safari')) {
   139                  //     player.play();
   140                  // }
   141  
   142                  // for (event in h265js.Events) {
   143                  //     player.on(h265js.Events[event], function(e, data) {
   144                  //         console.log(data);
   145                  //         if (h265js.Events[event] == h265js.Events.ERROR && data) {
   146                  //             console.log(data.type, data.detail, data.info);
   147                  //         }
   148                  //     });
   149                  // }
   150              });
   151              
   152              // player.on(h265js.Events.LOADSTART, function(event, data){
   153              //     console.log('loadStart: ', event, data);
   154              // });
   155              player.on(h265js.Events.MEDIAINFO, function(event, data){
   156                  console.warn('mediaInfo: ', event, data);
   157              });
   158              // player.on(h265js.Events.VOLUMECHANGE, function(event, data){
   159              //     console.log('volumechange: ', event, data);
   160              // });
   161              player.on(h265js.Events.ERROR, function(event, data){
   162                  console.warn('error: ', event, data.type, data.detail, data.info, data.info.code, data.info.msg);
   163              });
   164              // player.on(h265js.Events.WARNING, function(event, data){
   165              //     console.warn('warning: ', event, data);
   166              // });
   167              // player.on(h265js.Events.STATISTICSINFO, function(event, data){
   168              //     console.log('statisticsInfo: ', event, data);
   169              // });
   170              player.on(h265js.Events.WAITING, function(event, data){
   171                  console.warn('waiting: ', event, data);
   172              });
   173              player.on(h265js.Events.PLAYING, function(event, data){
   174                  console.warn('playing: ', event, data);
   175              });
   176  
   177              // player.on(h265js.Events.LOADEDEND, function(event, data){
   178              //     console.log('loadedEnd: ', event, data);
   179              // });
   180              // player.on(h265js.Events.PLAY, function(event, data){
   181              //     console.log('play: ', event, data);
   182              // });
   183              // player.on(h265js.Events.PAUSE, function(event, data){
   184              //     console.log('pause: ', event, data);
   185              // });
   186              player.on(h265js.Events.RELOAD, function(event, data){
   187                  console.warn('reload: ', event, data);
   188              });
   189          }
   190      }
   191  
   192      function flv_start() {
   193          if (player) {
   194              player.play();
   195          }
   196      }
   197  
   198      function flv_pause() {
   199          if (player) {
   200              player.pause();
   201              paused = true;
   202          }
   203      }
   204  
   205      function flv_destroy() {
   206          if (player) {
   207              setTimeout(function() {
   208                  player.destroy();
   209                  player = null;
   210              }, 500);
   211          } 
   212          flvLoad = false;
   213      }
   214  
   215      function flv_seekto() {
   216          var input = document.getElementsByName('seekpoint')[0];
   217          player.currentTime = parseFloat(input.value);
   218      }
   219  
   220      function getUrlParam(key, defaultValue) {
   221          var pageUrl = window.location.search.substring(1);
   222          var pairs = pageUrl.split('&');
   223          for (var i = 0; i < pairs.length; i++) {
   224              var keyAndValue = pairs[i].split('=');
   225              if (keyAndValue[0] === key) {
   226                  return keyAndValue[1];
   227              }
   228          }
   229          return defaultValue;
   230      }
   231  
   232      function browser_detect(name) {
   233          // Opera 8.0+
   234          var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
   235  
   236          // Firefox 1.0+
   237          var isFirefox = typeof InstallTrigger !== 'undefined';
   238  
   239          // Safari 3.0+ "[object HTMLElementConstructor]" 
   240          var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || safari.pushNotification);
   241  
   242          // Internet Explorer 6-11
   243          var isIE = /*@cc_on!@*/false || !!document.documentMode;
   244  
   245          // Edge 20+
   246          var isEdge = !isIE && !!window.StyleMedia;
   247  
   248          // Chrome 1+
   249          var isChrome = !!window.chrome && !!window.chrome.webstore;
   250  
   251          // Blink engine detection
   252          var isBlink = (isChrome || isOpera) && !!window.CSS;
   253  
   254          switch (name) {
   255              case 'safari':
   256                  return isSafari;
   257              case 'chrome':
   258                  return isChrome;
   259              case 'opera':
   260                  return isOpera;
   261              case 'firefox':
   262                  return isFirefox;
   263              default:
   264                  return '请输入要检测的浏览器名称';
   265          }
   266      }
   267  
   268      h265js.LoggingControl.addLogListener(function(type, str) {
   269          logcatbox.value = logcatbox.value + str + '\n';
   270          logcatbox.scrollTop = logcatbox.scrollHeight;
   271      });
   272  
   273      document.addEventListener('DOMContentLoaded', function () {
   274          // flv_load();
   275      });
   276  
   277      // 各种浏览器兼容
   278      var state, visibilityChange; 
   279      if (typeof document.hidden !== "undefined") {  //normal
   280          visibilityChange = "visibilitychange";
   281          state = "visibilityState";
   282      } else if (typeof document.mozHidden !== "undefined") {  //moz
   283          visibilityChange = "mozvisibilitychange";
   284          state = "mozVisibilityState";
   285      } else if (typeof document.msHidden !== "undefined") {   //ms
   286          visibilityChange = "msvisibilitychange";
   287          state = "msVisibilityState";
   288      } else if (typeof document.webkitHidden !== "undefined") {  //webkit
   289          visibilityChange = "webkitvisibilitychange";
   290          state = "webkitVisibilityState";
   291      }
   292  
   293      document.addEventListener(visibilityChange, function() {
   294          if (!browser_detect('opera')) {
   295              if (document[state] === "visible") {
   296                  if (flvLoad) {
   297                      flv_load();
   298                  }
   299              } else {
   300                  if (flvLoad) {
   301                      flv_destroy();
   302                      flvLoad = true;
   303                  }
   304              }
   305          }
   306      });
   307      // window.onload = function() {
   308      //     this.flv_load();
   309      // }
   310  </script>
   311  </body>
   312  </html>