vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
对于vue-video-player，从github上找到一段代码，直接放页面！可以了，视频展示出来了！开始下一个功能。。。。
这可能是大部分前端开发者一贯的思维模式，拿来一个插件，看着demo就做出来了，功能展示正常就OK了，但是一旦出了bug，就会面向百度编程或者面向Google编程！
其实，我也是这样的，哈哈哈哈.....
废话不多说，最近在做一个视频播放的功能，找到vue-video-player插件后，咔咔咔完事，拿着我的爱疯，完美演绎！但是其他人的国产某牌手机，展示的完全不一样，打开后自动全屏，而且还有个横竖屏控制。“这是我写的页面？？？？？”，心中一万只神兽在奔腾。横竖屏切换后，视频下的内容在全屏模式下展示了出来一部分。
百度了半天，看源码，还是不知道咋回事。
后来终于找到了解决办法：
之前:playsinline="playsinline"这里是true写死的,现在改为计算属性playsinline()
computed:{
player(){
returnthis.$refs.videoPlayer.player
},
playsinline(){
letua=navigator.userAgent.toLocaleLowerCase()
//x5内核
if(ua.match(/tencenttraveler/)!=null||ua.match(/qqbrowse/)!=null){
returnfalse
}else{
//ios端
returntrue
}
}
}
添加playsinline()这个计算属性,原因是在安卓和iOS端微信使用的内核不同,所需要的attribute也不同,尝试后,采用x5内核返回false,反之为true
配合jq工具,继续添加两个端所需的属性
@canplay="onPlayerCanplay($event)"
onPlayerCanplay(player){
varua=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(){
letwidth=document.documentElement.clientWidth;
letheight=document.documentElement.clientHeight;
document.getElementById('video_content').style.height=width+'px';
document.getElementById('video_content').style.width=height+'px';
},
}
／*视频旋转*/
.video_box_rotate{
transformrotate(90deg)
}
视频监听播放结束、进入全屏、退出全屏事件
mounted(){this.videoEnd()},
methods:{
videoEnd(){
letvideo=document.getElementById('video_content');
video.addEventListener('ended',()=>{
alert('videoend')
});
};//视频播放结束
}
//全屏事件x5videoenterfullscreen
//退出全屏x5videoexitfullscreen
监听手机横竖屏
window.addEventListener('orientationchange',function(){
//alert(window.orientation);//这里可以根据orientation做相应的处理
if(window.orientation===-90){
self.iphoneScreenShow=true;
}else{
self.iphoneScreenShow=false;
}
},false);
到此这篇关于vue-video-player解决微信自动全屏播放问题(横竖屏导致样式错乱问题)的文章就介绍到这了,更多相关vue-video-player自动全屏内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。