關於H.265編碼視頻流媒體播放器EasyWasmPlayer的html中的引用方式


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

實際效果展示:


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM