在页面的其余部分完成加载后延迟加载 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 视频的主要内容,如果未能解决你的问题,请参考以下文章