Question

正如标题所述，我试图使视频只能在视口中播放一次。我在这里找到了另一个具有相同主题的问题，但是答案所附的小提琴似乎无效（https://jsfiddle.net/jAsDJ/218/）。

这是我现在得到的代码：

$(window).scroll(function() {
    $('video.elementor-video').each(function() {
        var playing = null;

        $(this).on('playing', function() {
            playing = true;
        });

        $(this).on('ended', function() {
            playing = false;
        });

        if ($(this).visible(true) && playing !== false) {
            $(this)[0].play();
        } else {
            $(this)[0].stop();
        }
    });
   });

.full-height {
    height: 80vh;
    background: #ccc;
}

video {
    width: 50%;
    height: auto;
}

<body>
    <div class="full-height"></div>

    <video class="elementor-video" src="http://doo.se/doo/wp-content/uploads/2019/09/Adjunkten_Folder_A01.mp4" muted="muted" controlslist="nodownload"></video>

    <div class="full-height"></div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script src="https://www.corneliaborjesson.se/js/jquery.visible.js"></script>
</body>

但是此代码使在结束后滚动窗口时重新启动视频。希望您能帮助我找到解决方案！谢谢！

Answer 1

好吧，感谢this thread，现在我要走的更远。

function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}
$(window).scroll(function() {
  $(".autoplay").each(function () { 
     var hasReachedUserExperience = false;
        if (isInView($(this)) && !hasReachedUserExperience) {
            hasReachedUserExperience = true;
            $('video', this).get(0).play();
        }
  })
});

当页面上仅使用一个视频时，此功能有效。但是，如果我希望多个视频使用此脚本，则只能在第一个视频上使用。我知道为什么，因为它是全局变量。但是我不确定如何在不破坏脚本的情况下使其本地化。有什么建议吗？

Answer 2

这是我制定的解决方案：

function isInView(elem){
return $(elem).offset().top - $(window).scrollTop() < $(elem).height();
}
$(".autoplay").each(function (index, elem) { 
var hasReachedUserExperience = false;
  $(window).scroll(function() {
    if (isInView($(elem)) && !hasReachedUserExperience) {
        hasReachedUserExperience = true;
        $('video', elem).get(0).play();
    }
})
});

仅在视口中播放一次视频

2 个答案: