zoukankan      html  css  js  c++  java
  • TSINGSEE青犀视频H265流媒体播放器EasyWasmPlayer.Js如何实现自定义高度和宽度?

    对于TSINGSEE青犀视频开发的各种流媒体平台,大多数平台都已经支持了H.265编码的视频播放,即EasyWasmPlayer.Js播放器。

     

    当然该播放器在编译中,对于不同的屏幕大小或者浏览器播放界面,播放器的屏占比也是不同的,因此需要对EasyWasmPlayer.Js播放器自定义高度和宽度,来实现自定义播放器的大小。其步骤如下:

    1.新建父级播放器容器并赋予容器自定义宽高:

     

    2.新建播放器实例添加 height: true 属性,让播放器跟随父级宽高:

    new WasmPlayer(null, “newplay”, this.callbackfun, { Height: true });

    <!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>
        <style>
            .box {
                margin: auto;
                height: 400px;
                 600px;
            }
        </style>
    </head>
     
    <body>
        <h4 style="600px;margin: auto;">EasyWasmPlayer播放器</h4>
        <br>
        <div class="box">
            <div id="newplay" onClick="onplay"></div>
            <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,
                decodeType: 'soft'
            })
            //播放事件 传入地址播放
            btn.onclick = function(){
                player.play(value.value,1);
                console.log(value.value);
            }
        
        </script>
    </body>
    </html>
     
    

      

    编译完成之后,根据设定的宽高度,播放器界面如下:

     TSINGSEE青犀视频自主研发的播放器目前正在多个平台上得到了有效使用,并且支持集成。如果大家有兴趣,可以前往TSINGSEE青犀视频官方网站进行了解,当然也可以直接联系我们获取测试账号进行测试。

     EasyPlayer播放器项目还包括EasyPlayer RTSP、EasyPlayer RTMP、EasyPlayerPro和EasyPlayer.js等播放器,具备更高的可用性和更低的延时,欢迎了解。

  • 相关阅读:
    基于摸板匹配的目標跟蹤算法
    spoj 2713 Can you answer these queries IV
    zoj 3633 Alice's present
    hdu 3642 Get The Treasury
    poj 1195 Mobile phones
    poj 2760 End of Windless Days
    zoj 3540 Adding New Machine
    spoj 1716 Can you answer these queries III
    spoj 1043 Can you answer these queries I
    spoj 2916 Can you answer these queries V
  • 原文地址:https://www.cnblogs.com/TSINGSEE/p/14663552.html
Copyright © 2011-2022 走看看