背景是这样的,需要在一个比较小众的移动一体机大屏上展示一个网页数据可视化大屏,这个大屏的项目除了一些 图表,还需要跳转到另一个页面 播放视频 在视频上操作一些自定义的事件逻辑。
刚开始使用了vue-video-player,vue-aliplayer-v2 在播放时候。视频都无法正常解码或者播放,之后使用了flv.js,可以正常播放了,但是还是偶发不能播放。排查了网速后,发现网速正常。最后应用了cyberplayer.js 才解决这个兼容问题
<div id="dvplay"></div>
// 百度解析视频播放方法
baiduMp4(mp4Url, imgUrl) {
// 这里前面是用var声明的player,现在把player直接存在data()里面
this.player = cyberplayer('dvplay').setup({
width: '100%', // 宽度,也可以支持百分比(不过父元素宽度要有)
height: '100%', // 高度,也可以支持百分比
title: '', // 标题
file: mp4Url, // 播放地址
image: this.posterURl, // 预览图
autostart: false, // 是否自动播放
stretching: 'uniform', // 拉伸设置
repeat: true, // 是否重复播放
volume: 100, // 音量
controls: true, // controlbar是否显示
starttime: 0, // 视频开始播放时间点(单位s),如果不设置,则可以从上次播放时间点续播
logo: {
barLogo: false,
}
//ak: '***' // 公有云平台注册即可获得accessKey
});
//有的浏览器 不会自动播放的问题
this.player.onReady(()=>{
this.player.play();
})
},
beforeDestroy() {
if(this.player){
this.player.remove();
}
},
destroyed() {
this.$off();
this.$destroy();
},