我怎样才能让一个html视频播放一次，直到页面重新加载

Question

超级黑客！

所以我尝试并搜索了几个小时，但似乎无法找到解决方案。在我的页面上，当用户滚动到页面的某个点时，我将其设置为自动播放视频的位置。它效果很好，但我发现视频一遍又一遍地循环很烦人。我只希望视频只播放一次，直到用户重新加载页面或访问新页面并返回。然后视频可以再次播放。这就是我得到的！

HTML：

<video id="vid" width="400">
      <source src="assets/img/me.mp4" type="video/mp4">
        Your browser does not support HTML5 video. Please update your browser.
</video>

JavaScript：

$(window).scroll(function(){
    var myVideo = document.getElementById("vid");
    // console.log($(window).scrollTop());
    if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
        myVideo.play();
    }else{
            myVideo.pause();
    }
})

没什么特别的，非常简单。我知道循环有一个名为“loop”的 html5 属性，我不知道这是否是我的答案？在一些 HTML5 文档中看到循环属性和值 0 似乎是我正在寻找的？但不知道该怎么做？

值 0（默认）：视频仅播放一次。

值 1：视频将循环播放（永远）。

预先感谢女士们先生们！我真的很感激你的时间。

Answer 1

该loop属性的默认值是false，所以不，这不是您的解决方案。

您的问题是，play()每次满足您的要求（滚动位置）时您都会打电话。

您需要的是检查视频是否已经播放，如果没有，则播放视频。
值得庆幸的是，视频元素上有一个played属性，它将返回“时间范围，指示已播放视频的所有范围”。

所以你可以很容易地做到这样：

$(window).scroll(function(){
    var myVideo = document.getElementById("vid");

    if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
       if(myVideo.played.length === 0 )
          myVideo.play();
    }else{
            myVideo.pause();
    }
})

但正如您所注意到的，它只会播放视频一次，但在您暂停后不会重新开始播放，即使未到达结尾也是如此。那么这种情况的解决方案是在视频事件
上绑定一个标志：onended

// first attach the flag in the onended event
$('#vid').on('ended', function(){this.playedThrough = true;});

$(window).scroll(function(){
    var myVideo = document.getElementById("vid");

    if($(window).scrollTop() > 300 && $(window).scrollTop() < 975){
       // only if we didn't reached the end yet
       if(!myVideo.playedThrough)
          myVideo.play();
    }else{
       myVideo.pause();
    }
 })

Answer 2

2020年更新：

您可以使用

<video id="video-test" autoplay="1" />