DDR爱好者之家

vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
站长资源 2024/11/24 佚名
74 1538
DDR爱好者之家 Design By 杰米

对于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);
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米