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