页面加载时iframe显示加载状态视频的原因及修复方法

问题说明 #

页面加载时，通过iframe嵌入MP4视频会出现怪异的播放器加载状态，修复前后对比：

修复前 #

修复后 #

原代码 #

<section class="relative table w-full">
    <div class="container-fluid">
        <div class="grid md:grid-cols-12 grid-cols-1 items-center mt-10 gap-[30px]">
            <div class="md:col-span-12">
                <iframe class="w-full aspect-video " src="../src/assets/video/rubyonrails.mp4"></iframe>
            </div><!--end col-->
        </div><!--end grid-->
    </div><!--end container-->
</section>

解决办法 #

直接用HTML5原生的<video>标签替代iframe即可解决问题。iframe加载视频时会调用浏览器内嵌的iframe播放器，容易出现样式兼容或加载状态异常的问题；而video标签是专门为视频播放设计的，样式更统一，可控制性更强。

修改后的代码 #

<section class="relative table w-full">
    <div class="container-fluid">
        <div class="grid md:grid-cols-12 grid-cols-1 items-center mt-10 gap-[30px]">
            <div class="md:col-span-12">
                <video class="w-full aspect-video" src="../src/assets/video/rubyonrails.mp4" controls></video>
            </div><!--end col-->
        </div><!--end grid-->
    </div><!--end container-->
</section>

额外优化建议 #

• 添加poster属性设置视频封面，在视频加载完成前显示自定义图片，进一步优化加载视觉体验：

  <video class="w-full aspect-video" src="../src/assets/video/rubyonrails.mp4" controls poster="../src/assets/images/video-cover.jpg"></video>
  

• 若需要隐藏默认控件自定义播放逻辑，可以移除controls属性，通过JavaScript实现播放控制。

内容的提问来源于stack exchange，提问作者Sohaib Butt