title: Separate play/pause buttons in html5 video
body: <p>I am working on a portfolio website that in each of the projects I have a HTML5 video that fits the screen size. I also have a navigation bar that stays on the bottom of the page. This nav bar contains a "play" button that makes the video start playing. But once it's playing, I cannot pause it. (I do not want to use the video controls)</p>
  
  <p>I would like my play button to chage the "play" text for "pause" when I click it, and when I click pause, it will pause (and the text returns to "play").</p>
  
  <p>Also, when the video finishes playing, I would like to make it return to the poster image.</p>
  
  <p>I am using video.js.</p>
  
  <p>Here is my script.js file:</p>
  
  <p>(after the $(document).ready(function(){ )</p>
  
  <pre><code>$('#play').click(function(){
      videojs('#bird', {
              "autoplay": true, 
              "width": '100%', 
              "height": '100%', 
              "preload": 'auto'}, 
              function() {
                $('.vjs-control-bar').css('display', 'none');
                $('.top-header, .info').css('z-index','-1');
          });
  </code></pre>
  
  <p>This website makes something similar to what I want with this play/pause button: <a href="http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/2" rel="nofollow">http://html5-fullscreen-video.ceseros.de/html_5_fullscreen/movie/2</a></p>
  
  <p>Anyone knows how to solve this?</p>