浏览器支持H.265解码-知识分享平台

203

查询码:00000845

浏览器支持H.265解码

作者: 郁冲冲于 2021年01月20日 发布在分类 / 人防组 下,并于 2021年01月20日编辑

浏览器支持H.265解码

问题：web的一些video插件无法播放视频源码H265格式。

这里用到一个 EasyPlayer.js 插件解决了这个问题。

EasyPlayer.js H5播放器，是一款能够同时支持HTTP、HTTP-FLV、HLS（m3u8）视频直播与视频点播等多种协议，支持H.264、H.265、AAC等多种音视频编码格式，支持mse、wasm等多种解码方式，支持Windows、Linux、Android、iOS全平台终端的H5播放器。

1.下载

npm install @easydarwin/easywasmplayer --save

2.拷贝

Vue-Cli3.0 环境下

copy node_modules/@easydarwin/easywasmplayer/EasyWasmPlayer.js 到项目public目录下

copy node_modules/@easydarwin/easywasmplayer/libDecoder.wasm 到项目public目录下

3.在项目public目录index.html引入

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>EasyWasmPlayer-Demo</title>
    <script src="./EasyWasmPlayer.js"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

4.VUE中使用

<template>
  <div class="box">
    <div id="Player"></div>
  </div>
</template> <script> export default {  data() {  return {  player: '',  url: 'http://127.0.0.1:10080/fvod/PnCsnxdMg/video.m3u8'  }  },  mounted() {  // 实例化播放器  this.player = new WasmPlayer(null, 'Player', this.callbackfun)  // 调用播放  this.player.play(this.url, 1)  },  methods: {  callbackfun(e) {  console.log('callbackfun', e);  }  }  } </script> <style>  .box {  width:600px;  height:400px;  } </style>

实例化参数

var player = new wasmPlayer(url,ID，callbackFun,{cbUserPtr:this,cfKbs: fn, decodeType:"auto" or "soft", openAudio"1" or "0", BigPlay"true" or "false", Height:" true" or "false, HideKbs:" true" or "false});

参数	说明	类型	默认值
url	视频地址	String	null
ID	播放器实例的divID(必传)	String	-
decodeType	解码类型(auto：默认，soft：强制H265解码)	String	auto
openAudio	是否打开音频	Boolean	false
BigPlay	是否开启大的播放按钮	Boolean	false
Height	播放器尺寸是否继承父盒子的	Boolean	false
HideKbs	是否隐藏实时码率	Boolean	false
cfKbs	码率速率回调(averageKbps:平均传输速率，averageKbs: 平均码率，currentKbps: 当前传输速率，currentKbs: 当前码率)	function	-
callbackFun	事件回调	function	-
cbUserPtr	自定义指针(this的指向)	this

录像播放相关属性

注意：currentTime属性只在播放录像m3u8 有结束标记（#EXT-X-ENDLIST）的的流时生效。

play(url,autoplay,currentTime)

属性	说明	类型	默认值
url	播放流地址	String	-
autoplay	是否自动播放(0：默认，1：自动播放)	Number	0
currentTime	视频开始时间(换算成秒)	Number	0

事件

方法名	说明	参数
play	播放事件	url:'流地址',autoplay: '自动播放',currentTime:'开始时间'
pause	播放暂停	-
destroy	停止播放	-
openAudio	打开声音	-
closeAudio	关闭声音	-
startLoading	开始加载动画	-
endLoading	结束加载动画	-
fullScreen	开启或退出全屏	-
setSnap	设置封面照	封面图片地址
endSnap	清除封面照	-

修改日期	修改人	备注
2021-01-20 17:40:00[当前版本]	郁冲冲	创建版本
2021-01-20 17:39:43	郁冲冲	创建版本
2021-01-20 17:39:17	郁冲冲	创建版本

[Title]