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 es 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.

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 es 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.

• javascript
• html
• video

3 Answers 3

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

2020 update:

You can use

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

For my scenario, loop was working fine, but I also had onPlay & onPause declared. onPlay works well, but onPause caused the video to loop endlessly, even though loop was not declared.

To bat this, I detected video play & finish (as i have the controls removed, so pause is not an option) via addEventListener() - please see below:

const video = document.querySelector(...)

const videoStartedHandler = () => {
   // do stuff...
}
    
const videoEndedHandler = () => {
   // do stuff...
}

video.addEventListener('play', videoStartedHandler, false)
video.addEventListener('ended', videoEndedHandler, false)