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

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

对于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()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        return false
      } else {
        // ios端
        return true
      }
    }
  }

添加playsinline()这个计算属性,原因是在安卓和iOS端微信使用的内核不同,所需要的attribute也不同,尝试后,采用x5内核返回false,反之为true

配合jq工具,继续添加两个端所需的属性

@canplay="onPlayerCanplay($event)"

onPlayerCanplay (player) {
      var ua = navigator.userAgent.toLocaleLowerCase()
      // x5内核
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
        $('body').find('video').attr('x-webkit-airplay', true).attr('x5-playsinline', true).attr('webkit-playsinline', true).attr('playsinline', true)
      } else {
        // ios端
        $('body').find('video').attr('webkit-playsinline', 'true').attr('playsinline', 'true')
      }
    },

至此，完美解决安卓端微信播放时，横竖屏的播放样式错乱和播放时视频内容未自适应。

有问题欢迎提问