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>
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.
Sie können verwenden isInViewport jQuery-Plugin wie folgt:
$('video').each(function(){
if ($(this).is(":in-viewport")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
})