HTML5 video not restarting

Question

Thanks in advance for any help you're able to give. The issue I'm having is that the following code is in a javascript function when a button is clicked. The desired behavior is that on button click, a video fades in, plays for 10 seconds, and fades back out. Then when the button is clicked again, this behavior repeats.

Issue is, the second time the button is clicked, the video fades in but is already at the end of the video and then fades out after 10 seconds. Any idea why the vid.currentTime is not properly resetting the video?

var webm = document.getElementById('src');
webm.src = "src.webm";
var vid = document.getElementById('video');
vid.currentTime = 0;
vid.play();


vid.fadeToggle(1000);
setTimeout(function() {
    vid.fadeToggle(1000);
}, 10000);

and this is where the video file is imported

<video id="video" width="100%" Style="Display:none">
    <source id="src" src="src.webm" type="video/webm" />
</video>

Additional info has come to light. This only happens in Chrome, and doesn't happen even in Chrome when it's opened locally, only when the html page is served statically via express.

Does it also happens when you don't reset the ``' src ? – Kaiido Oct 15 '15 at 01:27 — Kaiido, Oct 15 '15 at 01:27

score 0 · Answer 1 · answered Oct 14 '15 at 21:18

0

Try

vid.load(); instead of vid.currentTime = 0;

answered Oct 14 '15 at 21:18

Matt O'Connell

287
2
14

For some reason if I do vid.load(); even when loading it the first time, what I get is a black screen instead of my video. – Atocil Oct 14 '15 at 21:32
While this code may answer the question, providing additional context regarding why and/or how this code answers the question improves its long-term value. – Christian Oct 15 '15 at 05:29

score 0 · Answer 2 · answered Oct 14 '15 at 21:25

Maybe you can try to add autplay to the video attribute, but I think the video will start looping.

<video id="video" width="100%" Style="Display:none" autoplay>

OR you can add this function or javascript line to your button function.

vid.load();

source: http://www.w3schools.com/tags/av_met_load.asp

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

Figured out that this was only an issue in chrome and seems to have to do with this question:

can't seek html5 video or audio in chrome

edited May 23 '17 at 12:03

Community

1
1

answered Oct 21 '15 at 23:26

Atocil

160
1
10

HTML5 video not restarting

3 Answers3