以下代码使用HTML5 Video, 使用静音（&A）；自动播放属性集。它拍摄我通过媒体库上传的视频，并全屏显示。我正在使用一个脚本来检测视频何时播放完毕，然后淡出并从DOM中删除。

HTML

<div class="fullscreen-bg">
    <video muted autoplay id="fullscreen-bg-video">
        <source src="http://localhost/test/wp-content/uploads/2019/01/video.mp4" type="video/mp4">
    </video>
</div>

JS

<script type=\'text/javascript\'>
    document.getElementById(\'fullscreen-bg-video\').addEventListener(\'ended\', detectEnd, false);

    function detectEnd(e) {
        jQuery(\'.fullscreen-bg\').fadeOut(1000,function(){jQuery(this).remove();});
    }
</script>

CSS

<style>
    .fullscreen-bg {
        background: #000;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        z-index: 9999;
    }

    #fullscreen-bg-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @media (min-aspect-ratio: 16/9) {
        #fullscreen-bg-video {
            height: 300%;
            top: -100%;
        }
    }

    @media (max-aspect-ratio: 16/9) {
        #fullscreen-bg-video {
            width: 300%;
            left: -100%;
        }
    }
</style>

Notes