Question

我有两个视频，一个用于移动设备，一个用于桌面设备。我使用媒体查询来显示它们。我的问题是：两者还是“加载”＃34;？我使用一个非常小的文件用于移动版本，但似乎需要永远加载仍然，这使我相信两个仍然被加载。这是我的代码：

HTML：

<video class="headVid1" playsinline autoplay muted loop preload="auto" id="bgvid">
    <source src="resources/css/img/backvidDesk.mp4" type="video/mp4">
</video>       
<video class="headVid2" playsinline autoplay muted loop preload="auto" id="bgvid">
    <source src="resources/css/img/backvidMob3.mp4" type="video/mp4">
</video>

CSS：

.headVid2{
    display: none;
}
@media (max-width:768px){
    .headVid1{
        display: none;
    }
    .headVid2{
        display: block;
    }
    video#bgvid{
        max-width:100vw !important;
    }
}

Answer 1

您应该设置适当的预加载属性（＆＃34;无＆＃34;）。例如：

<video class="headVid1" playsinline autoplay muted loop preload="none" id="bgvid">
    <source src="resources/css/img/backvidDesk.mp4" type="video/mp4">
</video>       
<video class="headVid2" playsinline autoplay muted loop preload="none" id="bgvid">
    <source src="resources/css/img/backvidMob3.mp4" type="video/mp4">
</video>

如何在HTML中仅加载适当的视频？

1 个答案: