Html開發:接收wss協議的flv格式視頻流鏈接並顯示在頁面

一、代碼

<html>
  <head>
    <title>wss協議視頻流展示</title>
  </head>
  <!-- 網頁視頻播放器 -->   <script src="http://cdn.jsdelivr.net/npm/xgplayer/browser/index.js" charset="utf-8"></script>
  <!-- 網頁視頻播放器flv格式加載相關js(ios系統暫不支持該插件) -->   <script src="http://cdn.jsdelivr.net/npm/xgplayer-flv.js/browser/index.js" charset="utf-8"></script> <body>
  <!-- 視頻放置區域 -->   <div id="wssFlvVideo"></div> </body>   <script type="text/javascript">     <!-- flv視頻播放器插件加載,配置信息 -->
    new window.FlvJsPlayer({   id: 'wssFlvVideo',   isLive: false,   playsinline: true,   url: 'wss://xxxxxxxxx.flv',   autoplay: true,   height: window.innerHeight,   width: window.innerWidth   });   </script> </html>

  網頁頭部加載播放器相關的腳本文件,在頁面中進行插件的加載和相關配置:

  id:視頻流要填充展示的頁面區域部分id

  isLive:直播場景要設置爲true

  url:視頻流地址

  autoplay:設置爲true的話加載完成後自動開始播放,false需要手動點擊

  height:視頻插件高度設置

  width:視頻插件寬度設置

  

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章