- 由于项目需要播放H265的视频回放,而部分插件兼容没那么好,找来找去,后面就试试使用EasyPlayer-pro.js(这里踩了个坑:EasyPlayer.js好像是不支持H265的视频流的,而且它还有npm的依赖包,是5.11版本的,我虽然按网上的教程操作了,但是视频播放不了,折腾了蛮久,后面才发现有EasyPlayer-pro.js才支持H265播放的)。但是,这个插件不能直接使用npm安装使用,所以项目暂时通过引入静态js库的方式调用。
- 文章后面附上github的示例地址。
- 在github上找到官网提供的示例,复制js文件夹下的所有文件到项目的static下,并在index.html下引入。
<script defer type="text/javascript" src="./static/easyplayer-pro/easyplayer-pro.js"></script>
<div class="easyPlayer" id="easyPlayer" style="width:100%;height:100%;"></div>
var easyplayer = null;
playCreate() {
let _this = this;
var container = document.getElementById("easyPlayer");
easyplayer = new EasyPlayerPro({
container: container,
decoder: "../../../static/easyplayer-pro/decoder-pro.js",
videoBuffer: 0.5, // 缓存时长
isResize: false,
text: "",
loadingText: "loading...",
// debug: true,
// debugLevel: 'debug',
useMSE: true,
useSIMD: false,
useWCS: true,
isMulti: false,
useSIMD: false,
muted: false,
hasAudio: true,
showBandwidth: false, // 显示网速
showPerformance: false,
// isNotMute: true,// 是否渲染音频
operateBtns: {
//操作按钮
fullscreen: true,
screenshot: false,
play: true,
audio: true,
record: false,
quality: false,
performance: false,
},
// watermarkConfig: {// 水印
// text: {
// content: 'easyplayer-pro'
// },
// right: 10,
// top: 10
// },
playbackForwardMaxRateDecodeIFrame: 1,
isWebrtcForOthers: true,
demuxUseWorker: true,
supportHls265: true,
});
easyplayer.on("play", function () {
console.log("easyplayer play");
_this.loadFinishType = true;
});
//easyplayer.on("error", function (type, msg) {
// console.log("easyplayer error:", type, msg);
//});
easyplayer.on("pause", function (info) {
console.log("easyplayer videoInfo", info);
});
// easyplayer.on('playbackPreRateChange', (rate) => {
// easyplayer.forward(rate);
// })
// easyplayer.on('playbackSeek', (data) => {
// easyplayer.setPlaybackStartTime(data.ts);
// })
},
onPlayer(url){
easyplayer.play(url)
}
视频正常播放了!
但是,还发现了个问题,easyplayer.on("error",function(){}),这个error的回调方法没回调,就是视频播放完了,网络报404了,也还是没有回调!各位使用过的小伙伴要是知道这个问题,请多指出。
github文档: github.com/EasyDarwin/…