CODEWITHSUNDEEP
htmlvideo
clusterBuddy
clusterBuddy

Reputation: 1554

HTML5 video element not looping when indicating time start+time end

I have a simple video source in html:

<div id="videoBG--wrapper">
<div id="video_overlay"></div>
<video loop id="videoBG" poster="/imgs/green_tree.png" autoplay muted >
    <source src="/videos/van_island_1080.mp4#t=23,28" type="video/mp4">
</video>
</div>

Once I remove #t=23,28 loop works.

Any idea why this is happening and how to overcome this?

Upvotes: 0

Views: 38

Answers (1)

VC.One
VC.One

Reputation: 15881

Not tested your code but I don't think that #t=23,28 will set a loop range as easily as you think.

You could use your #startTime with ontimeupdate to create a looping video effect.

  • ontimeupdate is updated every time when the video's currentTime changes, so use it to check if the #endTime is reached, then seek video to your preferred starting time.

Try setting your code like this example:

<html>
<body>

<div id="videoBG--wrapper">
<div id="video_overlay"></div>
<video loop id="videoBG" poster="/imgs/green_tree.png" autoplay muted ontimeupdate="myLooper(this)" 
source src="/videos/van_island_1080.mp4#t=23" type="video/mp4">
</video>
</div>

<script>

var myvid = document.getElementById("videoBG");

function myLooper(event) 
{
    //# IF endTime (seconds) reached THEN seek back to startTime
    if ( event.currentTime > 28 ) { myvid.currentTime = 23; }
}

</script>

</body>
</html>

Upvotes: 1

Related Questions