video.play（）获取（承诺）DOMException

Question

I spend half-day trying to figure why video.play() is not working on Chrome. I got this error : Uncaught (in promise) DOMException which seems to be really frequent. I read a bunch of stuffs but either I did not understand how to integrate the solution or it didn't work.

Here is my code :

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

I found this but I don't know how to integrate it and I don't even know if it's working. May it can help you :

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

My code is working perfectly on others browsers but I can't make it work on Chrome. Please rescue me ahah.

Answer 1

I find an alternative solution which is not what I wanted, but it works, it could still help someone so there it is :

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

I just use the try and catch to allow user to control the video play manually if it's not working automatically. Not perfect at all...