在页面的其余部分完成加载后延迟加载 html5 视频

Posted

技术标签:

【中文标题】在页面的其余部分完成加载后延迟加载 html5 视频【英文标题】:Delay loading of html5 video after the rest of the page finished loading 【发布时间】:2016-03-06 03:01:34 【问题描述】:

我有一个视频元素被用作我正在构建的页面底部部分的背景。我正在尝试通过将 src 存储为 data-src 属性并在其他资产加载后使用 jQuery 将其应用于 src 属性来为其构建一种“延迟加载”(因为它不是英雄图像或什么,我想加载一张海报以节省加载时间,然后再加载视频)。它似乎根本不适合我。 src 属性已正确应用,但视频未加载或自动播放。我是从错误的角度接近这个吗?有没有更好的方法来完成它?

以 wordpress 为基础。

基本 html

<video  loop controls autoplay class="connect-bg">
    <source data-src="<?php echo get_template_directory_uri(); ?>/contact_Footer.mp4" type="video/mp4">
</video>

jQuery 函数

$(window).load(function()
    footer_lazyloader();
);

function footer_lazyloader() 
    var $ = jQuery;

    $("video.connect-bg source").each(function()
        var sourceFile = $(this).attr('data-src');
        $(this).attr('src',sourceFile);
    );

【问题讨论】:

我不太懂 PHP,但你不需要在你的 source? 上添加一个 src` 当前使用 javascript 从 'data-src' 属性中获取 url,并将 src 从占位符小 gif 切换到存储的视频 url。忘记添加 tinygif 占位符 src! :) 对于悬停的 YouTube 视频:***.com/questions/7154958/… 【参考方案1】:

您可以分别使用“.load()”和“.play()”手动触发视频加载和播放。使用 'parentElement' 定位 'source' 元素的父元素来完成此操作:

$(function() 
  $("video.connect-bg source").each(function() 
    var sourceFile = $(this).attr("data-src");
    $(this).attr("src", sourceFile);
    var video = this.parentElement;
    video.load();
    video.play();
  );
);

【讨论】:

只是关于调用数据标签$(this).data('src') = $(this).attr('data-src') 的更简单方法的注释,否则加1^^

以上是关于在页面的其余部分完成加载后延迟加载 html5 视频的主要内容,如果未能解决你的问题,请参考以下文章

加载多个嵌入式 Youtube 视频时页面加载性能更好?

HTML5视频加载完成后如何使文本消失?

“magnific.popup.js”的延迟加载

页面加载完成后执行javascript [重复]

Js延迟加载的方式都有哪些?defer和async的区别是啥?

加载gif需要太长时间才能加载