Воспроизведение видео HTML5 при прокрутке до

Question

Есть ли способ автовоспроизвести видео HTML5 только в том случае, если у пользователя есть видео (или определенный процент видео) в окне просмотра браузера?

Answer 1

Вы можете использовать window.pageXOffset и window.pageYOffset, чтобы проверить, насколько далеко прокручивается окно вашего браузера как по вертикали, так и по горизонтали. Используйте их с window.innerWidth и innerHeight и некоторой базовой математикой геометрии, чтобы рассчитать, насколько ваша видимая страница перекрывается с самим видео. Поместите это все в функцию, которую вы можете прикрепить к событию scroll и resize на объекте окна, чтобы запускать проверку каждый раз, когда изменяется прокрутка.

Вот некоторые примеры кода:

var video = document.getElementById('video'), 
    info = document.getElementById('info'), 
    fraction = 0.8; 

function checkScroll() { 
    var x = video.offsetLeft, 
     y = video.offsetTop, 
     w = video.offsetWidth, 
     h = video.offsetHeight, 
     r = x + w, //right 
     b = y + h, //bottom 
     visibleX, 
     visibleY, 
     visible; 

    if (window.pageXOffset >= r || 
     window.pageYOffset >= b || 
     window.pageXOffset + window.innerWidth < x || 
     window.pageYOffset + window.innerHeight < y 
    ) {  

    info.innerHTML = '0%'; 
    return; 
    } 

    visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); 
    visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); 

    visible = visibleX * visibleY/(w * h); 

    info.innerHTML = Math.round(visible * 100) + '%'; 

    if (visible > fraction) { 
    video.play(); 
    } else { 
    video.pause(); 
    } 

} 

window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false); 

//one time at the beginning, in case it starts in view 
checkScroll(); 

//as soon as we know the video dimensions 
video.addEventListener('loadedmetadata', checkScroll, false); 

И working example.

Этот код предполагает довольно простой макет страницы. Если ваше видео расположено абсолютно внутри другого элемента, который имеет «положение: относительный», то вам нужно будет немного поработать, чтобы вычислить правильную позицию видео. (То же самое происходит, если видео было перемещено с CSS-преобразований.)

Answer 2

надеюсь, что это помогает, но это есть ответ

http://jsfiddle.net/jAsDJ/

var videos = document.getElementsByTagName("video"), 
fraction = 0.8; 
function checkScroll() { 

    for(var i = 0; i < videos.length; i++) { 

     var video = videos[i]; 

     var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right 
      b = y + h, //bottom 
      visibleX, visibleY, visible; 

      visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset)); 
      visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset)); 

      visible = visibleX * visibleY/(w * h); 

      if (visible > fraction) { 
       video.play(); 
      } else { 
       video.pause(); 
      } 

    } 

} 

window.addEventListener('scroll', checkScroll, false); 
window.addEventListener('resize', checkScroll, false); 

Answer 3

Коротко

Скажем, наш браузер окно W в настоящее время прокручено до y-позиции scrollTop и scrollBottom

O ur видео НЕ будет воспроизводиться, когда его позиция находится на V1 или V2, как показано ниже снимок.

детали Код

 $(document).ready(function() { 
      // Get media - with autoplay disabled (audio or video) 
      var media = $('video').not("[autoplay='autoplay']"); 
      var tolerancePixel = 40; 

      function checkMedia(){ 
       // Get current browser top and bottom 
       var scrollTop = $(window).scrollTop() + tolerancePixel; 
       var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel; 

       media.each(function(index, el) { 
        var yTopMedia = $(this).offset().top; 
        var yBottomMedia = $(this).height() + yTopMedia; 

        if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in `In brief` section above 
         $(this).get(0).play(); 
        } else { 
         $(this).get(0).pause(); 
        } 
       }); 

       //} 
      } 
      $(document).on('scroll', checkMedia); 
     }); 

Answer 4

Существует новый API для этого сценария, называется Intersection_Observer_API, который Chrome 51+ и 15+ Край поддерживает.

var options = { 
    root: document.querySelector('.scroll-container'), 
    rootMargin: '0px', 
    threshold: 1.0 // trigger only when element comes into view completely 
}; 
var ob = new IntersectionObserver((entries, observer) => { 
    entries[0].target.classList.toggle('red'); 
}, options); 

// observe all targets, when coming into view, change color 
document.querySelectorAll('.target').forEach((item) => { 
    ob.observe(item); 
}); 

Вот простая демонстрация: https://codepen.io/hectorguo/pen/ybOKEJ