So ändern Sie das Attribut “Autoplay” in einem Beitrag

Lesezeit: 2 Minuten

Benutzer-Avatar
Ngo Quoc Vinh

Ich habe ein Problem, mein WordPress-Blog bettet ein Video von Imgur ein. Es wird automatisch abgespielt, wenn es geladen wird. Es wird auch automatisch geloopt. Und es funktioniert perfekt mit diesem eingebetteten HTML. Es hört jedoch nicht auf, wenn wir es aus dem Bildschirm scrollen. Wie kann ich es stoppen, wenn es herausgescrollt wird? danken

<center><video style="max-width: 100%; height: auto;" preload="auto" autoplay="autoplay" loop="loop" controls="controls" width="450" height="auto"><source src="https://i.imgur.com/84FAg6j.mp4" /></video></center>

Ich habe gerade hinzugefügt id zum Video-Tag und ich habe gerade die Wiedergabe- und Pausenoptionen von jQuery basierend auf der Bildlaufposition verwendet. Ich hoffe, das wird Ihnen helfen.

var sec_position = $('#sec').offset().top;
var vid = document.getElementById('video');
$(window).on('scroll', function() {
  var window_position = window.pageYOffset;
  if (sec_position < window_position) {
    vid.pause();
  } else {
    vid.play();
  }
});
#sec {
  height: 500px;
  background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center><video id="video" style="max-width: 100%; height: auto;" preload="auto" autoplay="autoplay" loop="loop" controls="controls" width="450" height="auto">
    <source src="https://i.imgur.com/84FAg6j.mp4" /></video></center>
<div id="sec"></div>

  • Es hat Code-Snipptet ausgeführt und es funktioniert wie erwartet. Allerdings kenne ich mich mit WordPress nicht aus. Könnt ihr mir helfen wie ich es anwende. Vielen Dank

    – Ngo Quoc Vinh

    7. Februar 2020 um 23:50 Uhr


  • Vielen Dank … Video-Tag-Code-Einfügen in Ihre “Gefällt mir”-Seite, dann js-Code-Einfügen in die Fußzeile.

    – vadivel a

    8. Februar 2020 um 0:53 Uhr

Benutzer-Avatar
Holz535

Sie können jQuery verwenden:

HTML

Hinzufügen einer ID zu Ihrem Element:

<video id="myvideo" style="max-width: 100%; height: auto;" preload="auto" 
autoplay="autoplay" loop="loop" controls="controls" width="450" height="auto">

JS

Anrufpause beim Scrollen

$('#myvideo').bind("ended", function(){ 
   $('html, body').animate({
    scrollTop: $(".big-div").offset().top
}, 2000);
});


function isInView(el) {
  var rect = el.getBoundingClientRect();          
  return !(rect.top > $(window).height() || rect.bottom < 0);   // visible?
 }

 $(document).on("scroll", function() {
  $( "#myvideo" ).each(function() {
    if (isInView($(this)[0])) {                    // visible?
      if ($(this)[0].paused) $(this)[0].play();    // play if not playing
    }
    else {
      if (!$(this)[0].paused) $(this)[0].pause();  // pause if not paused
    }
  });  
});

CSS

.big-div{
  height:1000px;
  background:orange;
 }

Vergessen Sie nicht, jQuery einzubinden, bevor Sie die Funktion initialisieren (im Header)

 <script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 </script>

schau dir mein beispiel an:
https://plnkr.co/edit/REanzIzi7Pb33UPHLJo9?p=preview

Scrollen Sie nach einiger Zeit nach unten und wieder nach oben, um zu sehen, dass das Video angehalten wurde.

  • Das ist es, was ich will 🙂

    – Ngo Quoc Vinh

    7. Februar 2020 um 23:51 Uhr

Sie können verwenden isInViewport jQuery-Plugin wie folgt:

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

1311310cookie-checkSo ändern Sie das Attribut “Autoplay” in einem Beitrag

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

Privacy policy