vue中播放h265视频流

最近vue推流视频项目需要视频流适配h265，找到很多解码js，发现稳定和好用的还是WXInlinePlayer。官方文档地址https://github.com/ErosZy/WXInlinePlayer。一如既往我还是的喜欢直接上代码。不过这里提示下因为WXInlinePlayer没有WXInlinePlayer包<template><div><iframe st

文章共2,721字 · 阅读需要大约10分钟

一键AI生成摘要，助你高效阅读

问答

web愚者

5106人浏览 · 2021-06-17 14:08:40

web愚者 · 2021-06-17 14:08:40 发布

	最近vue推流视频项目需要视频流适配h265，找到很多解码js，发现稳定和好用的还是WXInlinePlayer。
官方文档地址https://github.com/ErosZy/WXInlinePlayer。
一如既往我还是的喜欢直接上代码。
不过这里提示下因为WXInlinePlayer没有npm WXInlinePlayer包 所以本项目是vue中引用html页面。


<template>
	<div>
	 <!-- vue-->
		<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, //是否Live
						chunkSize: 124 * 1024, //切片大小
						preloadTime: 500, //预加载缓冲时间
						bufferingTime: 500, //缓冲时间
						cacheSegmentCount: 64,
						customLoader: null,
					};
				}
		
				//初始化浏览器
				function initPlayer(options) {
						//判断是好好h265还是其他格式编码
					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", () => {
							// console.log("状态: 开播了")
							document.getElementById('loding').style.display = 'block'
							setTimeout(function(){
								if(display){
										document.getElementById('loding').innerHTML = '视频源响应超时'
										document.getElementById('loding').style.color = 'red'
								}
							},5000)
						})
						// player.on("buffering", () => {
						// 	console.log("状态: 加载中")
						// })
						// player.on("loadError", (e) => {
						// 	console.log("状态: 加载失败")
						// });
						// player.on("loadSuccess", () => {
						// 	console.log("状态: 加载成功");
						// });
						player.on("playing", () => {
							// console.log("状态: 播放中")
							display=false
							// document.getElementById('loding').style.display = 'none'
							
						})
						// player.on("paused", () => {
						// 	console.log("状态：已暂停")
						// })
						// player.on("stopped", () => {
						// 	console.log("状态：已停止")
						// })
						// player.on("end", () => {
						// 	console.log("状态：已放完")
						// })

						// player.on("performance", ({
						// 	averageDecodeCost,
						// 	averageUnitDuration
						// }) => {
						// 	console.log(
						// 		`解码平均:${Math.floor(averageDecodeCost)}ms,单元平均${Math.floor(averageUnitDuration)} ms`
						// 	)
						// });
					})

				}
				//开始播放

				initPlayer(getOptions()).then(() => {
					player.play()
				})
			} else {
				alert('当前浏览器不支持WXInlinePlayer，请下载谷歌浏览器最新版本')
			}
		</script>
	</body>
</html>

</style>