title: HTML5 video media fragments with Javascript
body: <p>No one on here ever comments on my questions but maybe this is an easy one?
      I'm new to coding and I am trying to find a way to navigate a video, as in play the first 10 seconds then stop, play seconds 30-40 then stop, play second 60-30 then stop, etc and to have buttons for it. I have found a tutorial but the buttons don't respond. I've cleaned up the code a bit (don't think I removed anything necessary) and pasted it below.
  Tutorial link:
  <a href="https://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/" rel="nofollow noreferrer">https://www.sitepoint.com/html5-video-fragments-captions-dynamic-thumbnails/</a></p>
  
  <p>HTML:
      </p>
  
  <pre><code>&lt;head&gt;
  
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Untitled Document&lt;/title&gt;
  
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;section class="wrapper"&gt;
  
    &lt;div&gt;
      &lt;video id="frag1" controls preload="metadata"&gt;
  
        &lt;source src="assets/disney.mp4"  type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' data-original="assets/disney.mp4"&gt;
  
        &lt;source src="assets/disney.mp4" type='video/webm;codecs="vp8, vorbis"' data-original="assets/disney.mp4"&gt;
  
      &lt;/video&gt;
      &lt;nav&gt;
        &lt;button data-start="0"&gt;Section One&lt;/button&gt;
        &lt;button data-start="6"&gt;Section Two&lt;/button&gt;
        &lt;button data-start="17"&gt;Section Three&lt;/button&gt;
      &lt;/nav&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>@charset "UTF-8";
  
  #main { width: 85%; margin: 1em auto; }
  
  section&gt;div { margin: 0 1.5% 1.5% 0; padding: 1.5%; float: left; background-color: #efefef; }
  
  
  video { width: 100%; min-height: 430px; }
  button { cursor: pointer; }
  nav&gt;button { margin: 0.27em; }
  nav&gt;button:first-child { margin-left: 0; }
  .wrapper { width: 520px; margin: auto; overflow: hidden; text-align: center; }
  
  .p {
    text-align: center;
    padding-top: 120px;
  }
  
  Resources 1×0.5×0.25× Rerun
  </code></pre>
  
  <p>JAVASCRIPT:</p>
  
  <pre><code>function mediaFragOne() 
  {
  var video, sources, nav, buttons;
  
  video = document.querySelector('video#frag1');
  sources = video.getElementsByTagName('source');
  nav = document.querySelector('video#frag1+nav');
  buttons = nav.getElementsByTagName('button');
  
  for(var i = buttons.length - 1; i &gt;= 0; i--) 
  {
      buttons[i].addEventListener('click', function() {
              for (var i = sources.length - 1; i &gt;= 0; i--) {
                  sources[i].setAttribute(
                      'src', (sources[i].getAttribute('data-original')
                      .concat('#t=' + this.getAttribute('data-start'))));
                      video.load();
                      video.play();
              };
          });
      }
  }
  mediaFragOne();
  </code></pre>