Javascript 如何使html视频播放一次，直到重新加载页面

超级黑客

所以我试了好几个小时，似乎找不到解决办法。在我的页面上，当用户滚动到页面的某个点时，视频会自动播放。它工作得很好，但我发现它令人讨厌的视频将循环一遍又一遍。我只希望视频只播放一次，直到用户重新加载页面或访问新页面并返回。然后视频可以再次播放。这是我得到的

HTML:

您的浏览器不支持HTML5视频。请更新您的浏览器。

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

$（窗口）。滚动（函数（）{
var myVideo=document.getElementById（“vid”）；
//log（$（window.scrollTop（））；
如果（$（窗口）.scrollTop（）>300&&$（窗口）.scrollTop（）<975）{
myVideo.play（）；
}否则{
myVideo.pause（）；
}
})

没什么特别的，向前走得很快。我知道循环有一个html5属性叫做“循环”，我不知道这是否是我的答案？在一些HTML5文档中看到的循环属性和值0似乎是我想要的？但不知道该怎么做

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

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

---

女士们、先生们，请提前感谢！非常感谢您的时间。

循环属性的默认值是

false

，因此这不是您的解决方案

您的问题是，每次您的需求（滚动位置）被满足时，您都会调用

play（）

您需要检查视频是否已播放，如果未播放，则播放视频。
谢天谢地，video元素上有一个属性，它将返回一个“Timerange，指示已播放视频的所有范围。”

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

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

2020年更新：

你可以用

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

PS：如果希望视频至少完整读取一次，则创建一个标志变量，并在视频的

oneded

事件中将其设置为true:

var playedOnce；myVideo.onended=function（）{playedOnce=true；}。。。if（$（window.scrollTop（）>…975）{if（！playedOnce）myVideo.play（）；}否则…

你能把全部内容写出来吗？我搞不清楚。你写的第一段代码非常好，我只是希望它能一直播放下去。如果用户在视频中间向下滚动，则暂停。但是如果他在所需的位置向上滚动。它以暂停的形式播放。曾经一路玩过。它不会重新启动。我们很接近！！！附言：我已经大致了解了你在评论中所写的内容，但我不相信我写的是正确的。这太棒了！正是我需要的！我也学到了很多。谢谢你，伙计！我真的很感谢你的时间和努力。

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

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