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

原创

TSINGSEE青犀视频

修改于 2021-04-14 14:15:01

1.3K0

修改于 2021-04-14 14:15:01

文章被收录于专栏：TSINGSEE青犀视频TSINGSEE青犀视频

对于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;
            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>

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