我有一个视频元素用作我构建的页面底部的部分的背景。我试图建立一种“懒惰”的负载。通过将src存储为data-src属性并在其他资源加载后使用jQuery将其应用于src属性(因为它不是英雄图像或任何东西,我想加载海报以保存)减少加载时间,然后加载视频)。它似乎根本不适合我。 src属性已正确应用,但视频无法加载或自动播放。我是从错误的角度接近这个吗?有没有更好的方法来实现它?
建立在wordpress上。
基本HTML
<video width="100%" 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);
});
}
答案 0 :(得分:16)
您可以使用&#39; .load()&#39;手动触发视频加载和播放。和&#39; .play()&#39;分别。定位来源的父级&#39;元素使用&#39; parentElement&#39;要做到这一点:
$(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();
});
});