一、代碼
<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:視頻插件寬度設置