video.play () получить Uncaught (в обещании) DOMException

Question

Я провожу полдня, пытаясь понять, почему video.play () не работает в Chrome.Я получил эту ошибку: Uncaught (in promise) DOMException, которая кажется очень частой.Я прочитал кучу материала, но либо не понял, как интегрировать решение, либо оно не сработало.

Вот мой код:

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


        var playPromise = document.querySelector('video').play();
        console.log(playPromise);
        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){ 
                    $(this).get(0).pause();
                    $(this).get(0).play();

                } else {
                    $(this).get(0).pause();
                }
            });
        }
        $(document).on('scroll', checkMedia);
    });

Я нашел это но я не знаю, как его интегрировать, и даже не знаю, работает ли он.Возможно, вам это поможет:

    var playPromise = document.querySelector('video').play();

// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
  playPromise.then(function() {
    // Automatic playback started!
  }).catch(function(error) {
    // Automatic playback failed.
    // Show a UI element to let the user manually start playback.
  });
}

Мой код отлично работает в других браузерах, но я не могу заставить его работать в Chrome.Пожалуйста, спасите меня, ахах.

Answer 1

Я нахожу альтернативное решение, которое не то, что я хотел, но оно работает, оно все равно может кому-то помочь, вот оно:

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

        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){ 
                    playVideo();
                } else {
                    $(this).get(0).pause();
                }
            });
        }

        async function playVideo() {
          try {
            $('.playOnScroll')[0].play();
          } catch(err) {
            video[0].setAttribute("controls","controls")
          }
        }

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

Я просто использую try и catch, чтобы позволить пользователю контролироватьвидео воспроизводится вручную, если оно не работает автоматически.Совсем не идеально ...