title: HTML5 custom video controls
body: <p>I want the substitute button to play the video on click. When I click the button nothing happens.. this is without the normal controls and I'm just testing this feature with a standard button but I'm not getting any response.</p>
  
  <pre><code>var func = function(){
  var video = document.getElementById('video');
  var but = document.getElementById('play-pause');
  but.addEventListener("click",function(){
      if (video.paused == true) {
          video.play();
      }else{
          video.pause();
      }
  });
  }
  func();
  </code></pre>
  
  <p>html</p>
  
  <pre><code>  &lt;div id="vid"&gt;
  &lt;video id="video" width="420" controls&gt;
  &lt;source src="images/tutorialUPLOAD.mp4" type="video/mp4" /&gt;
  &lt;p&gt; your browser does not support HTML5 video &lt;/p&gt;
  &lt;/video&gt;
  
  
  
  &lt;div id="vidctrl"&gt;
  &lt;button type="button" id="play-pause"&gt;click here to start&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>