How to stop video from playing after video is hidden by javascript code

Question

This is javascript code that I want to stop playing the video after hiding it. Can you give me a simple solution?

<script type="text/javascript">
 function display(id) {
  var vid = document.getElementById(id);
   if(vid.style.display == 'block') {

      vid.style.display = 'none';
    } else {
      vid.style.display = 'block';
    }
}


</script>

html code :

<div> <a onclick="display('ch1');"> <span>Video tutorial Ch1</span> </a> </div> 
  <div> <a onclick="display('ch2');"> <span>Video tutorial Ch2</span> </a> </div>
</section>

Answer 1

use vid.pause() and vid.play()

<script type="text/javascript">
   function display(id) {
       var vid = document.getElementById(id);
       if(vid.style.display == 'block') {
           vid.style.display = 'none';
           vid.pause();
       } else {
          vid.style.display = 'block';
          vid.play();
       }
    }
</script>

w3schools.com/tags/av_met_pause.asp