我有一个视频元素用作我正在构建的页面底部部分的背景。我试图通过将 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);
});
}
您可以分别使用“.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();
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)