Odtwarzanie wideo HTML5 po przewinięciu do

Question

Czy mimo to użytkownik może automatycznie odtwarzać wideo HTML5 tylko wtedy, gdy użytkownik ma wideo (lub pewien procent wideo) w oknie przeglądarki?

Answer 1

Można użyć window.pageXOffset i window.pageYOffset, aby sprawdzić, jak daleko przewija się okno przeglądarki zarówno w pionie, jak iw poziomie. Skorzystaj z nich z window.innerWidth i innerHeight oraz z pewną podstawową matematyką geometrii, aby obliczyć, ile widocznej strony pokrywa się z samym filmem. Umieść to wszystko w funkcji, którą możesz dołączyć do zdarzenia scroll i resize w obiekcie okna, aby uruchomić sprawdzanie za każdym razem, gdy zmienia się przewijanie.

Oto przykładowy kod:

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

I working example.

Kod ten zakłada dość prosty układ strony. Jeśli Twój film znajduje się całkowicie w innym elemencie, który ma ustawiony "position: relative", musisz wykonać nieco więcej pracy, aby obliczyć właściwą pozycję wideo. (To samo jeśli film został przeniesiony z transformacji CSS.)

Answer 2

nadzieję, że to pomaga, ale to zostało odebrane przed

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 skrócie

Powiedzmy naszą przeglądarkę okno W obecnie przewijane do pozycji y scrollTop i scrollBottom

O wideo ur nie zostanie odtworzone, gdy jego pozycja jest na V1 lub V2, jak poniżej migawki.

szczegóły Code

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

Jest nowe API dla tego scenariusza, zwany Intersection_Observer_API, który Chrome 51+ i 15+ krawędzi jest obsługiwany.

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); 
}); 

Oto prosty demo: https://codepen.io/hectorguo/pen/ybOKEJ