Как изменить атрибут "автозапуск" в посте - PullRequest
Новая
       6

Как изменить атрибут "автозапуск" в посте

4 голосов
/ 06 февраля 2020

У меня проблема, мой блог WordPress вставляет видео от Imgur. Это автозапуск, когда он загружен. Он также зацикливается автоматически. И это прекрасно работает с этой вставкой HTML. Тем не менее, это не останавливается, когда мы прокручиваем его за пределы экрана. Как остановить это при прокрутке? спасибо 

<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>

Ответы [ 3 ]

5 голосов
/ 06 февраля 2020

Я только что добавил id к тегу видео, и я только что использовал jQuery опции воспроизведения и паузы, основанные на позиции прокрутки. Надеюсь, это поможет вам. 

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>
3 голосов
/ 06 февраля 2020

Вы можете использовать jQuery:

HTML

, добавив идентификатор вашего элемента: 

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

JS

вызов пауза при прокрутке 

$('#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;
 }

Не забудьте включить jQuery перед инициализацией функции (в заголовке) 

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

посмотрите мой пример: https://plnkr.co/edit/REanzIzi7Pb33UPHLJo9?p=preview

Прокрутите вниз и снова через некоторое время, чтобы увидеть, что видео было приостановлено.

2 голосов
/ 06 февраля 2020

Вы можете использовать isInViewport jQuery плагин, как показано ниже: 

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