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

Question

Sup hackers!

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:

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

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?

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

Value 1: The video will loop (forever).

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

Solution 1

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

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

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

Solution 2

2020 update:

You can use

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

Comments

[Kaiido]

PS : if you want your video to be read at least once entirely, then create a flag variable and set it to true in the onended event of the video : var playedOnce; myVideo.onended = function(){playedOnce=true;}; ... if($(window).scrollTop() > ... 975){ if(!playedOnce )myVideo.play();}else...

[Michael Barreiro]

Could you write the whole thing out? Im having trouble making it out. The first code you wrote down is excellent, id just like it to play all the way through. and if the user scrolls down in the middle of the video, it pauses. But if he scrolls back up at the desired location. It plays form where it paused. Once played all the way through. It doesnt restart. We are close!!! P.S: I've sorta made out what you wrote in the comment, but i dont feel confident that I wrote it correctly.

[Michael Barreiro]

This is fantastic! exactly what i needed! I learned so much also. This is slick, thanks buddy! I really appreciate your time and effort.