TSINGSEE青犀視頻研發團隊經過多年的積累,已經有了視頻流媒體平台以及視頻播放器等優秀產品,比如EasyWasmPlayer播放器,就是一款能夠同時支持HTTP、RTMP、HTTP-FLV、HLS(m3u8)、WS-FLV視頻直播與視頻點播等多種協議,重點在於該播放器是一款支持H5的播放器,可以兼容H.265編碼格式視頻在web瀏覽器上面的直播。
播放器的HTML方式集成
軟件包目錄結構:
代碼示例
index-web.html 文件代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EasyWasmPlayer</title>
<script src="./EasyWasmPlayer.js"></script>
</head>
<body>
<h4 style="width:600px;margin: auto;">H265播放器</h4>
<br>
<div style="width:600px;height: 400px; margin: auto;">
<div id="newplay" onClick="onplay"></div>
<p>列如:http://127.0.0.1:8080/flv/hls/stream.flv</p>
<input type="text" id="value">
<button id="btn">播放</button>
</div>
<script>
// 播放器回調函數
callbackfun = function (e) {
console.log(e);
}
// 播放按鈕
var btn = document.getElementById('btn');
// 地址欄
var value = document.getElementById('value');
// 實例播放器
var player = new WasmPlayer(null, 'newplay', callbackfun,{
Height:true
})
//播放事件 傳入地址播放
btn.onclick = function(){
player.play(value.value,1);
console.log(value.value);
}
</script>
</body>
</html>
步驟
1.實例化播放器
2.傳入地址
3.通過事件觸發地址進行播放
具體的播放器功能事件
公網地址:https://www.npmjs.com/package/@easydarwin/easywasmplayer
實際效果展示: