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

How can i make a html video play one once, until the page is reloaded

本文关键字：新加载 加载 播放 怎么能 一个 html 视频 一次      更新时间：2023-09-26

黑客们!

所以我已经尝试和搜索了几个小时，似乎找不到一个解决方案。在我的页面上，当用户滚动到页面的某个点时，视频会自动播放。效果很好，但我觉得视频一遍又一遍地循环播放很烦人。我只是希望视频只播放一次，直到用户重新加载页面或访问新页面并回来。然后视频可以再次播放。这就是我得到的!

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

没什么特别的，很直接。我知道有一个html5属性的循环称为"循环"，我不知道这是否可以是我的答案或不?我在一些HTML5文档中看到循环属性和值0似乎是我想要的?但不知道该怎么做?

值0(默认):只播放一次。

值1:视频将循环播放(永远)。

女士们，先生们，提前感谢!我真的很感谢你的时间。

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

你的问题是，你将调用play()每次你的要求(滚动位置)被满足。

您需要做的是检查视频是否已经播放，如果没有，则播放视频。
值得庆幸的是，video元素上有一个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();
    }
 })

2020 update:

可以使用

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

对于我的场景，loop工作得很好，但我也有onPlay &onPause宣称。onPlay工作得很好，但是onPause导致视频无休止地循环，即使没有声明loop。

为了解决这个问题，我检测了视频播放&通过addEventListener()完成(因为我已经删除了控件，所以暂停不是一个选项)-请参见下面:

const video = document.querySelector(...)
const videoStartedHandler = () => {
   // do stuff...
}
    
const videoEndedHandler = () => {
   // do stuff...
}
video.addEventListener('play', videoStartedHandler, false)
video.addEventListener('ended', videoEndedHandler, false)
相关文章：