对于vue-video-player，从github上找到一段代码，直接放页面！可以了，视频展示出来了！开始下一个功能。。。。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

}

}
}

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')

}

},

@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';

},

}


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)
}


／*视频旋转*/
.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


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);


window.addEventListener('orientationchange', function() {

// alert(window.orientation); // 这里可以根据orientation做相应的处理

if (window.orientation === -90) {

self.iphoneScreenShow = true;

} else {

self.iphoneScreenShow = false;

}

}, false);