TSINGSEE青犀视频H.265流媒体EasyWasmPlayer.Js如何实现自定义高度和宽度?

2021-04-14 14:15:01 浏览数 (1)

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

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

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

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

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

代码语言:javascript复制
<!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等播放器,具备更高的可用性和更低的延时,欢迎了解。

0 人点赞