最近vue推流视频项目需要视频流适配h265,找到很多解码js,发现稳定和好用的还是WXInlinePlayer。
官方文档地址https://github.com/ErosZy/WXInlinePlayer。
一如既往我还是的喜欢直接上代码。
不过这里提示下因为WXInlinePlayer没有npm WXInlinePlayer包 所以本项目是vue中引用html页面。
<template>
<div>
<iframe style="width: 100% ;height: 100vh;" :src="`/h265/index.html?url=${flv.flvURL}`" frameborder="0" scrolling="no"></iframe>
</div>
</template>
<script>
</script>
<style scoped="scoped">
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=0.5" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>WXInlinePlayer demo</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
#loding {
color: #3778FA;
text-align: center;
margin-top:calc(-50vh - 8px ) ;
display: none;
}
</style>
</head>
<body>
<div>
<canvas id="canvas" style="width:100%;height:100vh;">
</canvas>
<p id="loding"> 视频正在加载中...</p>
</div>
<script src="./index.js"></script>
<script>
if (WXInlinePlayer.isSupport()) {
const $canvas = document.getElementById('canvas');
let display=true
$canvas.onclick = () => {
if(display)return
$canvas.requestFullscreen();
}
function getOptions() {
return {
url: window.location.search.substring(5),
$container: $canvas,
hasVideo: false,
hasAudio: false,
volume: 1.0,
muted: false,
autoplay: true,
loop: true,
isLive: true,
chunkSize: 124 * 1024,
preloadTime: 500,
bufferingTime: 500,
cacheSegmentCount: 64,
customLoader: null,
};
}
function initPlayer(options) {
if(window.location.search.substring(5).indexOf("h265") != -1){
WXInlinePlayer.init({
asmUrl: "./prod.h265.asm.combine.js",
wasmUrl: "./prod.h265.wasm.combine.js",
})
}else{
WXInlinePlayer.init({
asmUrl: "./prod.all.asm.combine.js",
wasmUrl: "./prod.all.wasm.combine.js",
})
}
return WXInlinePlayer.ready().then(() => {
player = new WXInlinePlayer(getOptions())
player.on("mediaInfo", (mediaInfo) => {
const {
onMetaData
} = mediaInfo;
$canvas.height = onMetaData.height;
$canvas.width = onMetaData.width;
});
player.on("play", () => {
document.getElementById('loding').style.display = 'block'
setTimeout(function(){
if(display){
document.getElementById('loding').innerHTML = '视频源响应超时'
document.getElementById('loding').style.color = 'red'
}
},5000)
})
player.on("playing", () => {
display=false
})
})
}
initPlayer(getOptions()).then(() => {
player.play()
})
} else {
alert('当前浏览器不支持WXInlinePlayer,请下载谷歌浏览器最新版本')
}
</script>
</body>
</html>
</style>