vue-video-player 使用总结

本文总结了使用vue-video-player时遇到的问题及解决方案,包括x5内核下显示问题、添加切换清晰度功能,以及动态存储播放进度的方法。在解决x5内核同层html不显示问题时,注意到x5-video-player-type与playsinline属性冲突。实现了通过按钮切换清晰度,避免直接更改播放源。在处理m3u8分片播放时,遇到currentTime设置问题,强调了卸载其他播放插件的重要性。
摘要由CSDN通过智能技术生成
1、vue-video-player 在x5内核同层html 不显示问题
<video-player class="video-player vjs-custom-skin" 
    ref="videos"
    // :playsinline="true" 
    :options="playerOptions"
    @canplay="onPlayerCanplay($event)"
    @play="onPlayerPlay($event)"
    @timeupdate="onPlayerTimeupdate($event)"
>
</video-player>

onPlayerCanplay (player) {
   
	var ua = navigator.userAgent.toLocaleLowerCase()
   	if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
   
     // x5内核
     let video = document.getElementsByTagName("video")[0]
     video.setAttribute('x5-video-player-type','h5') // 声明启用同层H5播放器,控制网页内部同层播放,可以在视频上方显示html元素。
         // video.setAttribute('x5-video-orientation','
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值