Question

我花了半天的时间来弄清video.play（）在Chrome上为何无法运行。我收到了这个错误：char，这似乎真的很常见。我读了很多东西，但要么我不明白如何集成该解决方案，要么它不起作用。

这是我的代码：

Uncaught (in promise) DOMException

我找到了this，但我不知道如何集成它，甚至不知道它是否有效。可以帮助您：

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

我的代码可以在其他浏览器上完美运行，但无法在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 and catch来允许用户手动控制视频播放（如果无法自动运行）。一点都不完美...

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

1 个答案: