I'm using timesheets.js and want to play a HTML5 video when the slider is active. I'm using this code:
if (document.getElementById("v_"+element.id)) { video = document.getElementById('v_'+element.id) video.currentTime = 0; video.play(); }
If I'm not using "video.currentTime = 0; it works most of the time (except when videos are too long). I have to reset the video so it plays from the beginning. Now it resets the video, but it doesn't play. Any ideas?
<video>: The Video Embed element. The <video> HTML element embeds a media player which supports video playback into the document.
An 'HTML5: Video file not found' error indicates either the browser you are using doesn't support HTML5 or the webpage doesn't have the proper video codec. You may contact the website's developer to install HTML5 supporting codecs for all the three WebM, MP4, and OGG formats.
With the introduction of HTML5, you can now place videos directly into the page itself. This makes it possible to have videos play on pages that are designed for mobile devices, as plugins like Adobe Flash Player don't work on Android or iOS. The HTML <video> element is used to embed video in web documents.
While Stichy posted a sufficient answer to his own question, the method video.load()
causes unnecessary bandwidth to be used as it reloads the video from the server.
Loading videos in particular can pose a heavy load on the server. Consider you could possibly be loading many megabytes each time the video is replayed.
There is also a short period where the user needs to wait for the video to re-download as well.
The solution I have found that works most efficient and smooth is by simply pausing the video before changing the currenttime
property.
Like so:
video.pause(); video.currentTime = 0; video.play();
This solved it! I changed the video.currentTime = 0;
to:
video.load();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With