zoukankan      html  css  js  c++  java
  • 关于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="600px;margin: auto;">H265播放器</h4>
        <br>
        <div style="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

    实际效果展示:

  • 相关阅读:
    js 监听页面url锚点变化 window.onpopstate
    js 返回上一页并刷新页面
    table 会有默认的外边框,内部会有分割线
    javascript 中设置window.location.href跳转无效问题解决办法
    chrom控制台常用方法
    Acquire and Release Fences
    常用 git 命令
    vim版本更新
    vim bundle安装
    emacs 常用命令
  • 原文地址:https://www.cnblogs.com/TSINGSEE/p/13816284.html
Copyright © 2011-2022 走看看