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

= Interaction =

==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


== event listeners==
It is also possible to write scripts to react to certain media events, such as play, pause, ended, etc.

The way it works is by adding and event listener to the video tag, that waits for an event to happen. When it does happen it executes the function

video.addEventListener('event', function(e){ do something here})

===events===
Here is a list of media events that can be listened to:
* playing -  	The MediaController is no longer a blocked media controller.
* ended - 	The MediaController has reached the end of all the slaved media elements.
* durationchange - 	The duration attribute has just been updated.
* timeupdate - 	The media controller position changed.
* play 	Event - 	The paused attribute is newly false.
* pause - 	The paused attribute is newly true.
* ratechange - 	Either the defaultPlaybackRate attribute or the playbackRate attribute has just been updated.
* volumechange -  Either the volume attribute or the muted attribute has just been updated.
<ref name="listeners">Full list of media events: http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents</ref>


=== more interaction ===
Here is example with video interaction, using JS : http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/skies/


=== playing ===
[[http://codepen.io/PublicationStation/pen/GNJRwo]] CODE pen is not responding

In these example, while playing change the body's background to black and when paused to white.
 
<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" 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

      video.addEventListener('play',  function(event){
          $('body').css('background', 'black');
      })

      video.addEventListener('pause',  function(event){
          $('body').css('background', 'white');
      })

  })

</script>
  </body>
</html>
</source>

----
===#2 video ===
Once you learn JS 

* includes an event listener that changes something on your page or the video  
* the user can interact with video events, '''without using the video player's controls'''.


-----