Editing Courses/Design & Technique-Essential Web Design/Q2/06 (section)

==media events==
Using Javascript and jQuery is possible to interactively control the audio/video events.

Here are a few examples<ref name="events">See more examples in: http://www.w3.org/2010/05/video/mediaevents.html http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents</ref>:

=== play / pause with mouseover ===
[http://codepen.io/PublicationStation/pen/GNJRER See code in action in codepen]

<source lang="html4strict">
<!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" autoplay loop 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">
</video>
</div>
<script>
  $(document).ready(
  function(){
  video = $('video#testvideo')[0]; //video player on to variable

      $('div.videowrap').mouseover(
          function(){
              video.play()
          })
          .mouseout(
          function(){
              video.pause()
          })

})
</script>
  </body>
</html>
</source>


=== move forward / back in currentTime ===
[http://codepen.io/PublicationStation/pen/jVPOmy See code in action in codepen]

Left and right arrow keys change video's currenttime.
<source lang="html4strict">
<script>
  $(document).ready(
  function(){
  video = $('video#testvideo')[0]; //video player on to variable
$( 'body').keydown(function( event ) {
  console.log(event);
  if ( event.key == 'ArrowLeft' ){ video.currentTime=video.currentTime-1;}
  if ( event.key == 'ArrowRight' ){ video.currentTime=video.currentTime+1;}
   })
})
</script>
</source>

instead of interacting with .currentTime it is possible to interact with 
* playbackRate
 playbackRate=1; // original playback rate 
 playbackRate=0.1; // very slow playback rate
 playbackRate-=0.1; // decrease playback rate
 playbackRate+=0.1; // increase playback rate

* volume
 playBackRate-=0.1; // 
 playBackRate+=0.1