web-dev-qa-db-fra.com

Lire la vidéo HTML5 lorsque vous faites défiler jusqu'à

Est-il possible de lire automatiquement une vidéo HTML5 uniquement lorsque l'utilisateur a la vidéo (ou un certain pourcentage de la vidéo) dans la fenêtre du navigateur?

javascriptjqueryhtml5videohtml5-video
23
jp89

En bref

Supposons que la fenêtre de notre navigateur W défile actuellement jusqu'à la position y scrollTop et scrollBottom

Notre vidéo ne sera PAS lue lorsque sa position est à V1 ou V2 comme instantané ci-dessous.

enter image description here

Détails du 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);
        });
27
Mikkel Jensen

j'espère que cela aide, mais il a déjà été répondu

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

Vous pouvez utiliser window.pageXOffset et window.pageYOffset pour vérifier dans quelle mesure la fenêtre de votre navigateur défile verticalement et horizontalement. Utilisez-les avec window.innerWidth et innerHeight et quelques calculs de géométrie de base pour calculer le chevauchement de votre page visible avec la vidéo elle-même. Mettez tout cela dans une fonction que vous pouvez attacher à l'événement scroll et resize sur l'objet fenêtre pour exécuter la vérification à chaque fois que le défilement change.

Voici un exemple de code:

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

Et un exemple de travail .

Ce code suppose une mise en page assez simple. Si votre vidéo est positionnée absolument à l'intérieur d'un autre élément qui a défini "position: relative", alors vous devrez faire un peu plus de travail pour calculer la position correcte de la vidéo. (Il en va de même si la vidéo a été déplacée avec des transformations CSS.)

8
brianchirls

Il existe une nouvelle API pour ce scénario, appelée Intersection_Observer_API , que Chrome 51+ et Edge 15+ a pris en charge.

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

Voici une démo simple: https://codepen.io/hectorguo/pen/ybOKEJ

2
HectorGuo