javascript - 滚动时自动播放视频，但仅播放一次

Question

我对 jquery 还很陌生，所以我从另一个 stackoverflow 问题中获取了这段代码，但我不知道如何调整它。

我有一个视频，当它滚动到窗口中时会自动播放。但是，如果视频暂停并且用户滚动哪怕一个像素，视频也会重新开始。如果用户滚动时视频仍在窗口中，我希望视频保持暂停状态。

理想情况下，如果视频完全消失然后返回，自动播放将再次运行。如果此自动播放功能仅运行一次并且用户可以根据需要选择再次播放视频，那么它也可以工作。

$(document).ready(function() {
    // Get media - with autoplay disabled (audio or video)
    var media = $('.autoplay').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)
                $(this).get(0).play();
            else
                $(this).get(0).pause();
        });
    }

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

Answer 1

只需将元素标记为已播放

 if( scrollTop < yBottomMedia && scrollBottom > yTopMedia){
              if (!$(el).attr('data-played')){
                $(el).attr('data-played',1);
                $(this).get(0).play();
               }
            } else {
                $(this).get(0).pause();
            }