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

nqwrtyyt 于 2023-10-21 发布在其他

关注(0)|答案(2)|浏览(138)

我有两个视频，一个用于移动的，一个用于桌面。我使用媒体查询来显示它们。我的问题是：两个都是“装”的吗？我使用一个非常小的文件为移动的版本，但它似乎需要永远加载仍然，这导致我相信这两个仍然在加载。下面是我的代码：
超文本标记语言：

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

css

来源：https://stackoverflow.com/questions/48669887/how-can-i-load-only-the-appropriate-video-in-html

2条答案

按热度按时间

5jvtdoz21#

您应该设置适当的预加载属性（“none”）。范例：

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

赞(0）回复(0）举报 2023-10-21

laik7k3q2#

<video _ngcontent-bvp-c9="" id="vid_html5_api" playsinline="playsinline" preload="auto" class="vjs-tech" tabindex="-1" role="application" src="blob:https://www.israelhayom.co.il/6ecb1326-1468-4a15-9032-3fa5a2996e59"> &lt;source type="application/x-mpegURL" src=&gt; <track kind="metadata" label="segment-metadata"></video>

赞(0）回复(0）举报 2023-10-21

我来回答

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

2条答案

相关问题

热门标签

最新问答