禁止加载 HTML 5 个视频

Question

我有一个设置，其中根据当前天气情况显示背景视频，如下所示：http://pitfarmtennis.co.uk/cms/。

有 6 个不同的视频，目前决定显示哪个的 jQuery 代码只是将它们设置为 display:none，遗憾的是，这意味着所有视频仍在加载。

这是当前正在播放某个视频的 jQuery，在本例中是一个阳光明媚的视频：

    /*Day-sun*/
    if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
        $('.home-bg-sun').css("display","inline");
    }

我尝试过的一种解决方案是将 HTML 中的所有 src 属性设置为 data-src，然后将相关属性更改为 src 以触发视频，但目前还没有奏效，但我可能做错了什么：

jQuery:

    /*Day-sun*/
    if((weather.code == "28")||(weather.code == "30")||(weather.code == "44")) {
        $('.home-bg-sun').attr('src', $('.home-bg-sun').attr('data-src'));
    }

HTML:

<div class="home-bg-sun">
    <video class="home-bg-sun-video" autoplay loop poster="wp-content/themes/eddiemachado-bones-9db85e4/library/images/home-bg-sun-first_frame.jpg">
        <source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.webm" type="video/webm">
        <source id="home-bg-sun-video-source" src="wp-content/themes/eddiemachado-bones-9db85e4/library/videos/home-bg-sun.mp4" type="video/mp4">
    </video>
</div>

如有任何帮助，我们将不胜感激！

PS：我正在使用 Yahoo Weather 获取天气情况。

Answer 1

您可以尝试从隐藏视频中删除 "autoplay" 属性，并重构您的超文本，例如：

Answer 2

视频元素上有一个 preload 属性。
您可能想尝试 metadata 或 none 值。

但请注意，此属性只是对浏览器的提示，并非强制遵循它。

禁止加载 HTML 5 个视频

Disable HTML 5 video from loading

javascript

jquery

html

html5-video

src