需求：
1、视频为长方形，页面初始化打开为横屏全屏播放视频。
2、微信不支持自动播放，故自动播放需求删除。
方法：
1、vue-video-player插件
因需求较简单，仅要求播放本地一个视频，故未选择使用插件。
2、video
<div id="video_box" style="z-index: 999;" :class="{video_box_rotate: isIos}">
<video
@click="videoPlay"
class="index_video"
poster="../assets/images/poster.jpg"
id="video_content"
style="object-fit:fill" /*加这个style会让 Android / web 的视频在微信里的视频全屏，如果是在手机上预览，会让视频的封面同视频一样大小
webkit-playsinline='true'
playsinline="true"
x5-playsinline="true"
x-webkit-airplay="true"
x5-video-player-type="h5"
x5-video-player-fullscreen="true" /*全屏播放*/
x5-video-ignore-metadata="true"
x5-video-orientation="landscape" /*播放器的方向，landscape横屏，portraint竖屏，默认值为竖屏*／
preload="preload"> <source src="../../static/video.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' > </video> </div>
具体属性解释可参考 https://blog.csdn.net/qq_16494241/article/details/62046891
同层H5播放器官网 https://x5.tencent.com/tbs/guide/video.html
注意：
x5-video-orientation="landscape" /*播放器支付的方向，landscape横屏，portraint竖屏，默认值为竖屏*／
landscape属性ios不支持
为兼容ios横屏将视频旋转90度
mounted() {
if (是否为ios) {
this.videoFullScreen();
}
}
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);
视频初始化黑屏
可以在视频上加个div浮层（可以一个假的视频第一帧），然后用timeupdate方法监听，视屏播放及有画面的时候再移除浮层。https://segmentfault.com/a/1190000009395289
视频进入全屏，退出全屏监听
https://segmentfault.com/a/1190000013232870
监听视频播放完成
https://blog.csdn.net/mondy592/article/details/81219167
参考资料 https://blog.csdn.net/xcy1193068639/article/details/80242111#commentsedit
安卓去掉控制按钮 参考http://www.xyhtml5.com/3252.html
欢迎大家指点，谢谢
转载于:https://www.cnblogs.com/1032473245jing/p/10222448.html
