How to stop (not pause) html5 video with jQuery

Question

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

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.

Answer 1

window.location.reload(false); is your friend here. With this (extra buttons added from what I found on https://levelup.gitconnected.com/data-stream-from-your-webcam-and-microphone-videochat-with-javascript-step-1-29895b70808b) when I click on my stop button the light next to my camera goes out and if I then click on start I am again prompted to allow access to the media devices. YMMV.

(function () {
  "use strict";

  document.addEventListener('click', async event => {
    if (event.target.id === 'start button') {
      const stream = await window.navigator.mediaDevices.getUserMedia({ video: true, audio: true });
      const video = document.getElementById('video');
      video.srcObject = stream;
      video.pause();
    }
    if (event.target.id === 'play button') {
      video.play();
    }
    if (event.target.id === 'pause button') {
      video.pause();
    }
    if (event.target.id === 'stop button') {
      window.location.reload(false);
    }
  });

})();

Answer 2

Set the srcObject to null.

var video = document.getElementById('video');

if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    
    navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        video.srcObject = null;
    });
} 

Answer 3

There is no .stop(). You just can pause it...

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.

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".

Answer 4

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