移动端的播放器兼容小众的安卓系统

背景是这样的,需要在一个比较小众的移动一体机大屏上展示一个网页数据可视化大屏,这个大屏的项目除了一些 图表,还需要跳转到另一个页面 播放视频 在视频上操作一些自定义的事件逻辑。
刚开始使用了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();
	},
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值