Lazy Load HTML-Video mit jQuery

Lesezeit: 3 Minuten

Benutzeravatar von user186141
Benutzer186141

Ich versuche, mein HTML-Video faul zu laden. Es ist in meiner WordPress-Vorlage und ich möchte, dass das Video geladen wird, wenn der Benutzer zu seinem Standpunkt gelangt.

Ich bin neu in JS, also denke ich, dass etwas nicht stimmt. Wie kann ich testen, ob Lazy Loading korrekt funktioniert? Vielleicht ist meine Funktion nicht gültig?

<video id="myVideo" autoplay loop muted playsinline src="https://stackoverflow.com/questions/61384355/<?= VIDEO ?>/video_footer.mp4">
    <source data-src="https://stackoverflow.com/questions/61384355/<?= VIDEO ?>/video_footer.mp4" type="video/mp4">
</video>

js:

$(function() {
$("video.myVideo source").each(function() {
    var sourceFile = $(this).attr('data-src');
    $(this).attr("src", sourceFile);
    var video = this.parentElement;
    video.load();
    video.play();
  });
});

  • Ich denke, in Ihrem Fall können Sie ein Mikro-Plugin wie verwenden fhopeman.github.io/justlazy Es ist ohne jQuery, sehr leicht und effizient. Es funktioniert auch mit Video-Tag.

    – TMA

    23. April 2020 um 11:09 Uhr

Benutzeravatar von kaize
kaize

Es ist unwahrscheinlich, dass das so funktioniert, wie es ist.

Sie haben die bereits eingestellt source zu video also auch wenn die funktion funktioniert, die videodatei ist schon da, also kein lazy load…

Das ist die richtige Einstellung:

<video id="myVideo" autoplay loop muted playsinline src="">
    <source data-src="https://stackoverflow.com/questions/61384355/<?= VIDEO ?>/video_footer.mp4" type="video/mp4">
</video>

Dann können Sie überprüfen, ob Ihre Funktion funktioniert


Eine andere Lösung ist zu verwenden intersection observer und mache es mit pure JavaScripteinfach, leicht und funktioniert in den meisten Fällen

Lazy-Load-Video mit reinem JavaScript:

<script type="text/javascript">
const lazyvideo = document.querySelectorAll('.lazy-video');
observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('video in the view');
         if (entry.target.querySelector('source').getAttribute('data-src') !== null) {
          const source = entry.target.querySelector('source').getAttribute('data-src')
          entry.target.setAttribute('src', source);
        }
      observer.unobserve(entry.target);
    } else {
      console.log('video out of view');
    }
  });
});

lazyvideo.forEach(video => {
  observer.observe(video);
});
</script>

Ich habe hinzugefügt console.log('video out of view'); & console.log('video in the view'); um die Konsole zu überprüfen, ob das Video angezeigt wird oder nicht.

Wenn Sie mit diesem Skript möchten, dass ein Video verzögert geladen wird, fügen Sie einfach eine hinzu class lazy-video dazu und du bist fertig 😉

Vollständiger Code:

const lazyvideo = document.querySelectorAll('.lazy-video');
observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.intersectionRatio > 0) {
      console.log('video in the view');
         if (entry.target.querySelector('source').getAttribute('data-src') !== null) {
          const source = entry.target.querySelector('source').getAttribute('data-src')
          entry.target.setAttribute('src', source);
        }
      observer.unobserve(entry.target);
    } else {
      console.log('video out of view');
    }
  });
});

lazyvideo.forEach(video => {
  observer.observe(video);
});
#myVideo {
  max-width:400px;
  width:100%;
}
<video id="myVideo" class="lazy-video" autoplay loop muted playsinline src="">
    <source data-src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

Wenn Sie sicher sein wollen, dass Lazy Load funktioniert

  • Öffnen Sie Ihre Chrome-Entwicklertools und gehen Sie zu Network und wählen Sie die aus
    media Tab
  • Laden Sie die Seite neu, während Sie die Tools geöffnet haben
  • Wenn Sie nicht zum Videoabschnitt gescrollt haben, sollten Sie das Video nicht in Ihrer Konsole sehen
  • Während Sie in der Ansicht des Videobereichs scrollen, müssen Sie sehen, wie das Video auf der Registerkarte Medien geladen wird

Siehe Screenshots unten:

Noch nicht da:

Geben Sie hier die Bildbeschreibung ein

Im Hinblick auf:

Geben Sie hier die Bildbeschreibung ein

  • Wow! Vielen Dank für die Wiederholung. Ich habe Probleme. mit dem Code. “Uncaught ReferenceError: Observer is not defined” als Konsolenfehler und wenn ich Video aus src im Video-Tag ausschließe und es nur im Source-Tag belasse, wird es nicht angezeigt. @Kaize

    – Benutzer186141

    23. April 2020 um 12:09 Uhr


  • Versuchen Sie, das Skript zu Ihrer Fußzeile oder nach dem Video hinzuzufügen

    – kaize

    23. April 2020 um 12:42 Uhr

  • Jetzt funktioniert es, aber woher weiß ich, dass das Video genau geladen wird, wenn ich im Videobereich scrolle? @Kaize

    – Benutzer186141

    23. April 2020 um 13:05 Uhr

  • Es funktioniert, aber wenn Sie sicher sein wollen, dass ich meine Antwort aktualisiert habe, überprüfen Sie den letzten Teil

    – kaize

    23. April 2020 um 13:23 Uhr

1426490cookie-checkLazy Load HTML-Video mit jQuery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy