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

20

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

    
задан jp89 13.03.2013 в 21:35
источник
  • У вас может быть div с дисплеем none ... и если возраст этого человека верен, добавьте тег видео с источником видео в div и измените отображение на блокировку .... если это то, что вы хочу, чтобы я мог помочь вам ... просто покажите мне, как вы хотите получить возраст посетителя, и вот он xD –  Hackerman 13.03.2013 в 21:37

4 ответа

21

Вкратце

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

Наше видео НЕ будет воспроизводиться, когда его позиция находится в 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);
        });
    
ответ дан Mikkel Jensen 22.10.2014 в 15:03
источник
  • Пожалуйста, объясните свои ответы, а не разместите стену кода. –  Gary 22.10.2014 в 15:29
  • Решение Mikkel объясняется в комментариях. Он элегантный, и он работает. Плюс мне нравится, что он использует jQuery. Спасибо Миккелю! –  soulphysics 23.11.2014 в 17:24
  • Я добавил объяснение для @MikkelJensen отличный ответ –  Nam G VU 09.08.2016 в 11:25
  • Это здорово, это мне очень помогло! Это не biggie, но есть ли способ сделать tolerancePixel процент? Также возможно отобразить кнопку «играть снова» после завершения видео? –  user1406440 25.10.2017 в 18:26
15

надеюсь, что это поможет, но на него ответили раньше

Ссылка

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);
    
ответ дан RXMESH 03.04.2014 в 10:25
источник
8

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

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

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

И рабочий пример .

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

    
ответ дан brianchirls 13.03.2013 в 22:35
источник
  • Я предполагал, что вопрос заключается в том, чтобы играть, как только определенный процент видео был загружен. Я не читал, что близко думаю –  Jason Sperske 13.03.2013 в 22:38
  • Hm выглядит хорошо. Есть ли способ сделать это с помощью jQuery? –  jp89 14.03.2013 в 01:03
  • Да. Вы можете использовать $ вместо getElementById и $ ('# video'). Bind (... вместо addEventListener. Вы можете использовать «.offset ()», если хотите. –  brianchirls 14.03.2013 в 01:41
1

Для этого сценария существует новый API, называемый Intersection_Observer_API , который Поддерживаются Chrome 51+ и Edge 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);
});

Вот простая демонстрация: Ссылка

    
ответ дан HectorGuo 21.04.2017 в 05:38
источник