vue video全屏播放

需求：

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

参考资料 https://blog.csdn.net/xcy1193068639/article/details/80242111#commentsedit

欢迎大家指点，谢谢