我怎么能让一个html视频播放一次，直到重新加载页面 [英] How can i make a html video play one once, until the page is reloaded

问题描述

Sup黑客！

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

So I've tried and searched for hours and cant seems to find a solution. On my page i made it to where the video automatically plays when the user scrolls to a certain point of the page. It works great, but I find it annoying how the video will loop over and over. I just want the video to play only ONCE, until the user reloads the page or visits a new page and comes back. Then the video can play again. Here is what i got!

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：

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文档中看到的loop属性和值0看起来像是在寻找什么？但不知道该怎么办呢？

nothing to special, pretty stright forward. I understand there is a html5 attribute for loops called "loop", I dont know if this could be my answer or not? iv'e seen in some HTML5 docs for the loop attribute and value 0 seems like what im looking for? but not sure how to go about it?

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

Value 0 (default): The video will play only once.

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

Value 1: The video will loop (forever).

提前感谢女士和男士！我非常感谢你的时间。

Thanks in advance Ladies and Gents! I really do appreciate your time.

推荐答案

循环的默认值属性是 false ，所以不，这不是你的解决方案。

The default value of the loop attribute is false, so no it's not your solution.

您的问题是每次填写要求（滚动位置）时，您都会调用 play（）。

Your problem is that you will call play() each time your requirements (scroll position) are fullfilled.

你需要检查视频是否已播放，只有不播放，然后播放视频。

谢天谢地，有一个 播放属性将返回时间范围，表示已播放视频的所有范围。

What you need is to check if the video already has been played and only if not, then play the video.
Thanksfully, there is an played attribute on the video Element that will return a "Timerange indicating all the ranges of the video that have been played."

因此您可以轻松制作像这样：

So you could easily make it like so :

$(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 事件上绑定一个标志：

But as you noticed it will play the video only once, but won't restart the playing after you paused it, even if the end wasn't reached.
Then a solution for this case is to bind a flag on the onended event of the video :

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

这篇关于我怎么能让一个html视频播放一次，直到重新加载页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！