• 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等播放器,具备更高的可用性和更低的延时,欢迎了解。

  • 相关阅读:
    MacPE+WinPE-黑苹果之路
    项目已被os x使用 不能打开-黑苹果之路
    X230上安装Yosemite/Win7-黑苹果之路
    SVN-服务器搭建、apache2整合、eclipse使用
    Android开发-Hello World+phonegap(Cordova)
    IOS开发-phonegap上的数据库
    lenovo X230热键功能
    XBox360-双光盘游戏自制GOD
    Kindle3与亚马逊
    iOS开发tips-UIScrollView的Autlayout布局
  • 原文地址:https://www.cnblogs.com/TSINGSEE/p/14663552.html
Copyright © 2020-2023  润新知