TSINGSEE青犀视频H265流媒体播放器EasyWasmPlayer.Js如何实现自定义高度和宽度?
对于TSINGSEE青犀视频开发的各种流媒体平台,大多数平台都已经支持了H.265编码的视频播放,即EasyWasmPlayer.Js播放器。
当然该播放器在编译中,对于不同的屏幕大小或者浏览器播放界面,播放器的屏占比也是不同的,因此需要对EasyWasmPlayer.Js播放器自定义高度和宽度,来实现自定义播放器的大小。其步骤如下:
1.新建父级播放器容器并赋予容器自定义宽高:
2.新建播放器实例添加 height: true 属性,让播放器跟随父级宽高:
new WasmPlayer(null, “newplay”, this.callbackfun, { Height: true });
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!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; width: 600px; } </style> </head> <body> <h4 style= "width: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等播放器,具备更高的可用性和更低的延时,欢迎了解。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步