vue-video-player 解决微信自动全屏播放问题,横竖屏导致样式错乱问题

使用vue-video-player时遇到在国产手机微信中自动全屏并导致样式错乱的问题。通过研究源码和百度搜索,发现需要根据设备内核动态设置playsinline属性。通过计算属性playsinline()来判断安卓和iOS,并添加相应属性,成功修复了在安卓端微信播放时的横竖屏样式问题和内容自适应问题。
摘要由CSDN通过智能技术生成

对于vue-video-player,从github上找到一段代码,直接放页面!可以了,视频展示出来了!开始下一个功能。。。。

这可能是大部分前端开发者一贯的思维模式,拿来一个插件,看着demo就做出来了,功能展示正常就OK了,但是一旦出了bug,就会面向百度编程或者面向Google编程!

其实,我也是这样的,哈哈哈哈.....

废话不多说,最近在做一个视频播放的功能,找到vue-video-player插件后,咔咔咔完事,拿着我的爱疯,完美演绎!但是其他人的国产某牌手机,展示的完全不一样,打开后自动全屏,而且还有个横竖屏控制。“这是我写的页面?????”,心中一万只神兽在奔腾。横竖屏切换后,视频下的内容在全屏模式下展示了出来一部分。

百度了半天,看源码,还是不知道咋回事。

后来终于找到了解决办法:

之前:playsinline="playsinline"这里是true写死的,现在改为计算属性playsinline()

 computed: {
    player () {
      return this.$refs.videoPlayer.player
    },
    playsinline () {
      let ua = navigator.userAgent.toLocaleLowerCase()
      
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值