title: HTML5 Video pause with Javascript when starting to play another video
body: <p>I was just wondering is there any option to create a Javascript that pauses a video that is currently playing when You click play on another video.
  I've got about 30-40 HTML5 video tags on one page.</p>
  
  <p>Code that I'm using to put videos on page:</p>
  
  <pre><code>function pobierz_klipy($typ) {
      $result = mysql_query("SELECT * FROM Klipy WHERE typ = $typ ORDER BY id")
              or die("Zapytanie niepoprawne");
  //ilosc zwroconych wierszy
      $num_rows = mysql_num_rows($result);
      $i = 0;
      while ($i &lt; $num_rows) {
          $id = mysql_result($result, $i, "id");
          $nazwa = mysql_result($result, $i, "nazwa");
          $nazwa_rob = mysql_result($result, $i, "nazwa_rob");
          $typ = mysql_result($result, $i, "typ");
          $sprawdzian_hq = $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
  
          if (file_exists($sprawdzian_hq)) {
              $sciezka = "../video/data/video/" . $nazwa_rob . "_fb.mp4";
          } else {
              $sciezka = "../video/data/video/" . $nazwa_rob . ".mp4";
          }
          if (file_exists($sprawdzian_hq)) {
              $poster = "../video/data/thumbnails/" . $nazwa_rob . "_fb.mp4.jpg";
          } else {
              $poster = "../video/data/thumbnails/" . $nazwa_rob . ".mp4.jpg";
          }
  
  
          if (file_exists($sprawdzian_hq)) {
              $hq = "../video/data/video/" . $nazwa_rob . ".mp4";
          } else {
              $hq = null;
          }
          $i = $i + 1;
          echo "&lt;div class=\"klip\"&gt;";
          echo '&lt;video id="' . $nazwa_rob . '" width="320" height="180" controls poster= "' . $poster . '" preload ="none"&gt;';
          echo ' &lt;source id="source_' . $nazwa_rob . '" src="' . $sciezka . '" type="video/mp4"&gt;';
          echo 'Twoja przeglądarka nie obsługuje HTML5.';
          echo '&lt;/video&gt;';
          echo '&lt;br /&gt;';
          if ($hq != null) {
              echo '&lt;button id="videolink' . $i . '" type="button" class="btn btn-danger active" style=" font-size: 10px; padding: 5px; position: absolute; bottom: 2px; left: 11px;"&gt;HQ&lt;/button&gt;';
          }
          echo '&lt;div class="nazwa"&gt;'.$nazwa.'&lt;/div&gt;';
          //skrypt zmiany jakosci JS
          if (file_exists($sprawdzian_hq)) {
              echo '
              &lt;script type = "text/javascript"&gt;
                  var videobutton = document.getElementById("videolink' . $i . '");
  
                  videobutton.addEventListener("click", function (event) {
              ';
              echo "
                      var videocontainer$i = document.getElementById('$nazwa_rob');
                      var videosource$i = document.getElementById('source_$nazwa_rob');
                      var newmp4$i = '$hq';
                      var old_mp4$i = '$sciezka';
                      var aktywne$i = 'btn btn-success active';
                      var nieaktywne$i = 'btn btn-danger active';
                      var przycikstatus$i = document.getElementById('videolink$i');
                      var obecny_klip$i = videosource$i.getAttribute('src');
                      var czas_klipu$i = videocontainer$i.currentTime;
                      console.log(czas_klipu$i);
  
                      if (obecny_klip$i != newmp4$i) {
                          var videosource$i = document.getElementById('source_$nazwa_rob');
                          videocontainer$i.pause();
                          videosource$i.setAttribute('src', newmp4$i);
                          videocontainer$i.load();
                          videocontainer$i.pause();
                          videocontainer$i.currentTime = czas_klipu$i;
                          przycikstatus$i.setAttribute('class', aktywne$i);
                          videocontainer$i.play();
  
                      } else {
                          var videosource$i = document . getElementById('source_$nazwa_rob');
                          videocontainer$i.pause();
                          videosource$i.setAttribute('src',old_mp4$i);
                          videocontainer$i.load();
                          videocontainer$i.pause();
                          videocontainer$i.currentTime = czas_klipu$i;
                          przycikstatus$i.setAttribute('class', nieaktywne$i);
                          videocontainer$i.play();
  
                      }
  
  
                  }, false);
  
              &lt;/script&gt;
              ";
          }
  </code></pre>