Courses/Design & Technique-Essential Web Design/Q2/Example/Play pause video

From Publication Station

pause and play the video with the space key

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <style>
      body {text-align:center;}
      div.videowrap {display: inline-block;}
    </style>
  </head>
  <body>
    <div class="videowrap">
      <video id="testvideo" controls width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">
        <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4"  type="video/mp4">
          <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
      </video>
    </div>
    <script>
    $(document).ready(
        function(){
            video = $('video#testvideo')[0]; //video player on to variable
 


            $( 'body').keydown(function( event ) {
                if ( event.keyCode == "32" ) {
                    if ( video.paused == true) {                        
                        video.play();
                    }
                    else { video.pause();} 
                        
                }
            })



            video.addEventListener('play',  function(event){
                $('body').css('background', 'url("http://www.aubenas-vals.com/wp-content/uploads/2014/05/Video41.jpg")');
            })
 
            video.addEventListener('pause',  function(event){
                $('body').css('background', 'white');
            })
 
        })
    </script>
  </body>
</html>