web-dev-qa-db-ja.com

html5ビデオの読み込みを遅らせる

作成しているページの下部にあるセクションの背景として使用されているビデオ要素があります。他のアセットが読み込まれた後、srcをdata-src属性として保存し、jQueryを使用してsrc属性に適用することで、一種の「レイジーロード」を構築しようとしています（これはヒーローイメージではないため、何でも、ロード時間を短縮するためにポスターをロードして、後でビデオをロードしたいです。それは私のために全く働いていないようです。 src属性は正しく適用されていますが、ビデオが読み込まれないか、自動再生されません。私は間違った角度からこれに近づいていますか？それを達成するためのより良い方法はありますか？

ワードプレス上に構築。

基本的な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);
    });
}
javascriptjqueryhtmlhtml5-videolazy-loading
12
Jon Hendershot

「.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();
  });
});
19
guest271314