手机移动端视频全屏播放（兼容Android与iOS）

在做移动端项目时，做个视频播放是不可避免的，大部分情况下都是点击一个按钮，视频全屏播放，下面将对这个情况进行分析与记录。

html:

<video height="100%" id="videoPlay1" playsinline preload="auto" src="video.mp4" type="video/mp4" width="100%" x5-video-player-type="h5" x5-video-player-fullscreen="true" hidden style="object-fit:fill;height:100vh;"></video>

其中，x5-video-player-fullscreen="true"是设置视频全屏，hidden是设置视频刚开始为隐藏状态，style中的object-fit:fill; 为视频在屏幕中的填充模式,有fill，cover和contain三种填充模式，可以根据需要设置。

js:

    var video1 = document.getElementById("videoPlay1");//获取视频元素
    var audio=document.getElementById("bg-music");//获取背景音乐
    $('.learn').click(function () {
            audio.pause();//背景音乐暂停
            $('#videoPlay1').show();//视频展示
            video1.play();//视频播放
           
            video1.onended = function() {//视频播放结束执行的函数
                $('#videoPlay1').hide();//视频隐藏
                $(".music-btn").hasClass("pause")?audio.pause():audio.play();//音乐设置，如果音频播放视频前为暂停状态，音乐依然暂停，如果为播放状态，音乐播放
            };
    });

如有问题或是错误，欢迎留言。