Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/06"

From Publication Station
Line 24: Line 24:
| Internet Explorer, Chrome, Safari  
| Internet Explorer, Chrome, Safari  
|}
|}
== video codecs and containers explained==
== video codecs and containers explained==
Video files such as .avi .mp4 .ogv .mkv are '''container formats'''. Like a .zip file which contains other files within it,  
Video files such as .avi .mp4 .ogv .mkv are '''container formats'''. Like a .zip file which contains other files within it,  
Line 32: Line 31:
'''Each video container allow specific audio and video codecs'''.  
'''Each video container allow specific audio and video codecs'''.  


A codec defines the way (the algorithm) by which a audio or video stream is encoded and decoded. <ref name="key frames">Note: a lossy audio and video compression codecs try to store the max amount of information in the smallest amount of space. One technique use to achieve this goal in video is the use of key frames instead of sequence of frames. In a second there only two or three key frames are used to create the illusion of movement, the remaining frames are filled with inbetweens, changes og pixel color. When a drastic change to the image occurs a key frame must be created.</ref>  
A codec defines the way (the algorithm) by which a audio or video stream is encoded and decoded. <ref name="all">All info on av codecs and containers in http://wiki.multimedia.cx/</ref>
 
 
==video codes==
==video codes==
=== H264 ===
=== H264 ===
Line 113: Line 111:
</source>
</source>


==events==
==media events==
Using Javascript and jQuery is possible to interactively control the events of the video.
Using Javascript and jQuery is possible to interactively control the events of the video.
Here are a few examples:
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 ===
=== play / pause with mouseover ===
Line 124: Line 122:
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
     <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style>
<style>
    body {text-align:center;}
     div.videowrap {display: inline-block;}
     div.videowrap {display: inline-block;}
</style>
</style>
Line 129: Line 128:
   <body>
   <body>
<div class="videowrap">
<div class="videowrap">
<video id="testvideo" controls loop width=800 poster="http://static.ddmcdn.com/gif/tour-de-france-top-ways-the-race-has-changed-picnic-130619.jpg">
<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">
   <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">
   <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
Line 156: Line 155:
* seek
* seek
*  
*  
=== play / pause with mouseover ===
=== move forward / back in currentTime ===
Left and right arrow keys change video's currenttime.
<source lang="html4strict">
<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 == 'ArrowRight' ) {
              video.currentTime+=5;
          }
          else if (event.key == 'ArrowLeft') {
              video.currentTime-=5;
          }
      })
})
</script>
</source>
</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




=== play / pause with mouseover ===
== 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>
 
 
=== playing ===
In these example,while playing change the body's background to black and when paused to white.
<source lang="html4strict">
<source lang="html4strict">
</source>
<!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');
      })
 
  })




=== play / pause with mouseover ===
</script>
<source lang="html4strict">
  </body>
</html>
</source>
</source>


== event listeners==


<ref name="all">All info on av codecs and containers in http://wiki.multimedia.cx/</ref>




Revision as of 18:28, 2 January 2016

audio and video in HTML5

HMTL5 includes a standard way to embed audio and video tags, without the use of flash. It playing audio and video quite easy and opens up a lot of possibilities audio-visual interaction and manipulation.

Let's see how.


preparing your video files

To be certain that your videos will play in all current browsers, you'll need to have videos in both .mp4 and .ogv container formats. [1]


Royalty Free Patented
Codec & containers Theora(video) + Vorbis(audio) > .ogv H.264 (video) + AAC or MP3 (audio) > .mp4
Browsers Firefox, Chrome, Opera Internet Explorer, Chrome, Safari

video codecs and containers explained

Video files such as .avi .mp4 .ogv .mkv are container formats. Like a .zip file which contains other files within it, video container formats define how to store video and audio streams within them. [2]

Each video container allow specific audio and video codecs.

A codec defines the way (the algorithm) by which a audio or video stream is encoded and decoded. [3]

video codes

H264

  • can be embedded in mp4 container
  • is patent-encumbered

Theora

  • can be embedded in any codec, but is most common in .ogv container
  • royalty-free

audio codecs

MP3

  • number of channels: 1 or 2 [4]
  • possible bitrates: 64 kbps, 128 kbps, 192 kbps
  • is patent-encumbered
  • Also known as MPEG-1 Audio Layer 3.

AAC

  • is patent-encumbered
  • number of channels: up to 48
  • Also known as Advanced Audio Coding

Vorbis

  • can be embedded in .ogg (also .mp4, .webm, .mkv) containers
  • royalty-free
  • number of channels: any


prepare your files

As said previously: To be certain that your videos will play in all current browsers, you'll need to have videos in both .mp4 and .ogv container formats. In other words you need to encode your videos into these 2 formats.

There are several solutions to do this, but Miro video converter seems to the best, converting both to .mp3 and .ogg.

Download Miro from http://www.mirovideoconverter.com/

in Miro

  • Select the file you want to convert to .ogv and .mp4
  • Choose the Format menu:
    • For a .mp4 video Video > MP4
    • For a .ogv video Video > Ogg Theora
  • Press the large button: "Convert to ..."

Conversion will start. When it is done the new file will be saved.

Miro Video Converter 005.png

video tag

<video controls>
  <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>

This is the simplest a web video player you can get.

A <video> tag encapsulating 2 <source> tags, each containing the same video in the different formats mp4 and ogv.

The argument controls make sure the video players has controls.


video tag attributes

Besides controls the <video> has a number of other attributes.[5]

  • controls - if present, show player's controls
  • autoplay - if present, automatically start player as page loads.
  • loop - if present,
  • poster - presents a poster image while the video is stopped as
  • height
  • width


<video controls 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">
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
</video>

media events

Using Javascript and jQuery is possible to interactively control the events of the video. Here are a few examples[6]:

play / pause with mouseover

<!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">
  <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

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

})
</script>
  </body>
</html>
  • seek

move forward / back in currentTime

Left and right arrow keys change video's currenttime. 

<script>
  $(document).ready(
  function(){
  video = $('video#testvideo')[0]; //video player on to variable

      $( 'body').keydown(function( event ) {
          console.log(event);
          if ( event.key == 'ArrowRight' ) {
              video.currentTime+=5;
          }

          else if (event.key == 'ArrowLeft') {
              video.currentTime-=5;
          }

      })

})
</script>

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.

[7]


playing

In these example,while playing change the body's background to black and when paused to white. 

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



video sources

https://archive.org/details/movies


references

Blog on containers and codecs

AV Codes supported by video containers

notes

  1. ↑ Read more on browsers' supported formats in https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
  2. ↑ http://diveintohtml5.info/video.html
  3. ↑ All info on av codecs and containers in http://wiki.multimedia.cx/
  4. ↑ Unlike video, audio typically is in stereo, which means that it has 2 channels or streams
  5. ↑ Read more on video attributes in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
  6. ↑ See more examples in: http://www.w3.org/2010/05/video/mediaevents.html http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents
  7. ↑ Full list of media events: http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents
Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/Q2/06&oldid=2841’