title: Video slideshow javascript pause when changing slides
body: <p>I have built a HTML5 video slideshow. What I want to do is pause any videos that are playing when the user goes to the next slide. How would I do this in javascript? Here is what I have done so far:</p>
  
  <p><a href="https://codepen.io/patriciaworth/pen/wVgovq" rel="nofollow noreferrer">https://codepen.io/patriciaworth/pen/wVgovq</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//starting slide
  var slideIndex = 1;
  showSlides(slideIndex);
  
  // Next/previous controls
  function plusSlides(n) {
    showSlides(slideIndex += n);
  }
  
  //calcuate number of slides and which ones not to show
  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    if (n &gt; slides.length) {
      slideIndex = 1
    }
    if (n &lt; 1) {
      slideIndex = slides.length
    }
    for (i = 0; i &lt; slides.length; i++) {
      slides[i].style.display = "none";
      //pause videos here?
    }
  
    slides[slideIndex - 1].style.display = "block";
  
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    border: 0;
  }
  
  html {
    background: #333;
  }
  
  $page-font: Arial;
  $electric-pink: #e236c8;
  h1 {
    color: #fff;
    float: left;
    font-family: Arial;
    font-size: 20px;
  }
  
  .slideshow {
    margin: 0 auto;
    width: 600px;
  }
  
  .ss-controls {
    float: right;
    .ss-back,
    .ss-forward {
      color: #fff;
      font-family: $page-font;
      font-size: 16px;
      margin: 0 3px;
      &amp;:hover {
        color: $electric-pink;
        cursor: pointer;
      }
    }
  }
  
  .mySlides {
    margin-top: 20px;
    width: 100%;
    video {
      width: 100%;
      margin-bottom: 15px;
    }
    color: #e6e6e6;
    font-family: $page-font;
  }
  
  
  /* Fading animation */
  
  .fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
  }
  
  @-webkit-keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }
  
  @keyframes fade {
    from {
      opacity: .4
    }
    to {
      opacity: 1
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta content="HTML5 Video Slideshow" name="description"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, min-width=320" /&gt;
    &lt;title&gt;HTML5 Video Slideshow&lt;/title&gt;
    &lt;!--My CSS --&gt;
    &lt;link href="css/styles.css" rel="stylesheet"&gt;
    &lt;!-- Fontawesome --&gt;
    &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="slideshow"&gt;
      &lt;h1&gt;Video Slideshow&lt;/h1&gt;
      &lt;span class="ss-controls"&gt;
                  &lt;span class="ss-back"&gt;
                      &lt;a class="prev" onclick="plusSlides(-1)"&gt;&lt;i class="fas fa-caret-left fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/span&gt;
      &lt;span class="ss-forward"&gt;
                      &lt;a class="next" onclick="plusSlides(1)"&gt;&lt;i class="fas fa-caret-right fa-2x"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;/span&gt;
      &lt;/span&gt;
      &lt;div class="mySlides fade"&gt;
        &lt;video controls&gt;
                      &lt;source src="videos/mp4/Reflona - SilentCrafter.mp4" type="video/mp4"&gt;
                      &lt;source src="videos/mp4/Reflona - SilentCrafter.webm" type="video/webm"&gt;
                      Your browser does not support the video tag.
                  &lt;/video&gt; Reflona - SilentCrafter
      &lt;/div&gt;
      &lt;div class="mySlides fade"&gt;
        &lt;video controls&gt;
                      &lt;source src="videos/mp4/Fog - Dizaro.mp4" type="video/mp4"&gt;
                      &lt;source src="videos/mp4/Fog - Dizaro.webm" type="video/webm"&gt;
                      Your browser does not support the video tag.
                  &lt;/video&gt; Dizaro - Fog
      &lt;/div&gt;
      &lt;div class="mySlides fade"&gt;
        &lt;video controls&gt;
                      &lt;source src="videos/mp4/Virtual Trip - Niwel.mp4" type="video/mp4"&gt;
                      &lt;source src="videos/mp4/Virtual Trip - Niwel.webm" type="video/webm"&gt;
                      Your browser does not support the video tag.
                  &lt;/video&gt; Virtual Trip - Niwel
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;!--Slideshow js--&gt;
    &lt;script src="js/slideshow.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Note the videos are not visible because I can not upload them.</p>