How to stop (not pause) html5 video with jQuery
How to stop (not pause) html5 video with jQuery
I have a page that plays a short clip from a video (full video isn't supposed to be available on this page) using the html5 video tag. If a user visits the page and navigates back, when they visit a second time (within several minutes), the video doesn't play. I believe it is because I am using jQuery to pause the video after 7 seconds:
$('#playButton').click(function(event)
$('#theVideo').get(0).play()
setTimeout(function()$('#theVideo').get(0).pause() , 7000);
);
I tried using .stop() as suggested in the unaccepted answer on this question:
Make HTML5 video stop at indicated time
.stop()
This code does not work:
// doesn't work
setTimeout(function()$('#theVideo').get(0).stop() , 7000);
// also doesn't work
setTimeout(function()$('#theVideo').stop() , 7000);
I've referenced Mozilla's documentation. The only quasi-official documentation I've found for jQuery and HTML5 video is from w3schools:
https://www.w3schools.com/tags/ref_av_dom.asp
It does not reference a "stop" method. Should I expect .stop() to work, or do I need to find another solution?
My video code:
<video playsinline id='theVideo' poster=''>
<source src='http://somedomain/subfolder/playlist.m3u8'>
</video>
<div id="playButton">PLAY</div>
I appreciate your help.
2 Answers
2
There is no .stop(). You just can pause it...
.stop()
But you also can set the currentTime back to zero (begining of the file)...
That will be nice to have it ready to play again on subsequent #playButton click.
currentTime
#playButton
That would be:
$('#playButton').click(function(event)
$('#theVideo').get(0).play();
setTimeout(function()
$('#theVideo').get(0).pause();
$('#theVideo').get(0).currentTime = 0;
, 7000);
);
Now, «If a user visits the page and navigates back»... Holà!! Using the browser's back button? Nothing you can do here. The JavaScript is not ran like a normal page load here. Nothing can happen "on back".
You can stop it with pause and currentTime.
var media = $("#video-id").get(0);
media.pause();
media.currentTime = 0;
Check this out: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
