华山资源网

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
网络编程 2024/11/15 佚名
3 1

对于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')
   }
  },

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

为兼容ios横屏将视频旋转90度

methods: {
　　　　// 视频宽高设置为手机宽高
    videoFullScreen() {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      document.getElementById('video_content').style.height = width + 'px';
      document.getElementById('video_content').style.width = height + 'px';
    },
  }


／*视频旋转*/
.video_box_rotate{
　　
  transform rotate(90deg)
}

视频监听播放结束、进入全屏、退出全屏事件

mounted() {this.videoEnd()},
methods: {
  videoEnd(){
　　　　　　let video = document.getElementById('video_content');
　　　　　　video.addEventListener('ended', () => {
　　　　　　　　alert('video end')
　　　　　　});

　　}; // 视频播放结束
}
// 全屏事件 x5videoenterfullscreen
// 退出全屏 x5videoexitfullscreen

监听手机横竖屏

window.addEventListener('orientationchange', function() {
          // alert(window.orientation); // 这里可以根据orientation做相应的处理
          if (window.orientation === -90) {
            self.iphoneScreenShow = true;
          } else {
            self.iphoneScreenShow = false;
          }
        }, false);
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com