CODEWITHSUNDEEP
javascripthtmlgoogle-chromevideo-streaminghtml5-video
sbr
sbr

Reputation: 4833

How to gracefully stop html5 video playback

Is there a way to cleanly stop the html5 video playback ?

There are options like:

Set videoElement.src = "" . This throws an error on the video element, with code = 4.

OR

call videoElement.load(). This sets the readyState = 0 but there is not much documentation around it.

Upvotes: 1

Views: 944

Answers (1)

David Mulder
David Mulder

Reputation: 27010

UX Perspective

Looking on Google for the difference between pause and stop gave me various results which I can summrize as:

Pause: Playback is stopped. Hitting play again continues from last position.
Stop: Playback is stopped. Hitting play again continues from beginning

At least from the UX point of view that covers all grounds

Stopping of loading of media

If your real goal is to stop the buffering process from happening as well, then your current approach seems to be entirely correct, running the following code is not triggering any errors for me in any browser I tried.

var video = document.querySelector("video");
video.play();
setTimeout(function() {
  video.pause(0);
  video.setAttribute("src", "");
}, 5000);
<video id="video" controls="" preload="none" mediagroup="myVideoGroup" poster="http://media.w3.org/2010/05/sintel/poster.png" style="height:180px">
  <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
  <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
  <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
</video>

Upvotes: 1

Related Questions