vue-video-player解决⾃动全屏播放问题（横竖屏导
致样式错乱问题）
对于vue-video-player，从上到⼀段代码，直接放页⾯！可以了，视频展⽰出来了！开始下⼀个功能。。。。
这可能是⼤部分前端开发者⼀贯的思维模式，拿来⼀个插件，看着demo就做出来了，功能展⽰正常就OK了，但是⼀旦出了bug，就会⾯向百度编程或者⾯向Google编程！
其实，我也是这样的，哈哈哈哈.....
废话不多说，最近在做⼀个视频播放的功能，到vue-video-player插件后，咔咔咔完事，拿着我的爱疯，完美演绎！但是其他⼈的国产某牌⼿机，展⽰的完全不⼀样，打开后⾃动全屏，⽽且还有个横竖屏控制。“这是我写的页⾯”，⼼中⼀万只神兽在奔腾。横竖屏切换后，视频下的内容在全屏模式下展⽰了出来⼀部分。
百度了半天，看源码，还是不知道咋回事。
后来终于到了解决办法：
之前:playsinline="playsinline"这⾥是true写死的，现在改为计算属性playsinline()
computed: {
player () {
return this.$refs.videoPlayer.player
},
playsinline () {
let ua = LocaleLowerCase()
// x5内核
if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
return false
} else {
/
/ ios端
return true
}
}
}
video安卓下载添加playsinline()这个计算属性，原因是在安卓和iOS端使⽤的内核不同，所需要的attribute也不同，尝试后，采⽤x5内核返回false，反之为true
配合jq⼯具，继续添加两个端所需的属性
@canplay="onPlayerCanplay($event)"
onPlayerCanplay (player) {
var ua = LocaleLowerCase()
// 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;
},
}
／*视频旋转*/
.video_box_rotate{
transform rotate(90deg)
}
视频监听播放结束、进⼊全屏、退出全屏事件
mounted() {this.videoEnd()},
methods: {
videoEnd(){
      let video = ElementById('video_content');
      video.addEventListener('ended', () => {
        alert('video end')
      });
  }; // 视频播放结束
}
// 全屏事件 x5videoenterfullscreen
/
/ 退出全屏 x5videoexitfullscreen
监听⼿机横竖屏
window.addEventListener('orientationchange', function() {
// ientation); // 这⾥可以根据orientation做相应的处理
if (ientation === -90) {
self.iphoneScreenShow = true;
} else {
self.iphoneScreenShow = false;
}
}, false);
到此这篇关于vue-video-player 解决⾃动全屏播放问题(横竖屏导致样式错乱问题)的⽂章就介绍到这
了，更多相关vue-video-player ⾃动全屏内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。