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

From Publication Station
 
(37 intermediate revisions by the same user not shown)
Line 1: Line 1:
=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.
==video sources==
https://archive.org/details/movies


https://commons.wikimedia.org/wiki/Main_Page


== preparing your video files==
==Simple examples==  
<span style="background:yellow">'''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.'''</span> <ref name="formats"> Read more on browsers' supported formats in https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats</ref>
Video: https://codepen.io/PublicationStation/pen/rQZaLJ


Audio: https://codepen.io/PublicationStation/pen/MOVgON


{| class="wikitable" border="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 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 file formats (.avi .mp4 .ogv .mkv) are containers to video and audio streams
'''video container formats define how to store video and audio streams within them.''' <ref name="divehtml">
* Each '''video format''' allow specific audio and video codecs
http://diveintohtml5.info/video.html</ref>
* '''codecs''' are the way by which a audio or video stream is encoded and decoded.


'''Each video container allow specific audio and video codecs'''.  
Current web browsers support:
* video format: '''.mp4''' with streams
** '''video''' encoded with '''H264 codec'''
** '''audio''' encodec with '''AAC''' (multichannel) or '''MP3''' (stereo) codecs
 
 
 
==first, preparing your video files==
To be certain that your videos will play in all current browsers, you'll need to have your videos or audio encoded in the codecs above.
 
There are several solutions to do this:
* [https://handbrake.fr/ Handbrake]
* [http://www.mirovideoconverter.com/ Miro]
 
 
===in Miro===
* Select the file you want to convert to .ogv and .mp4
* Choose the Format menu:
** '''For a .mp4 video''' Video > <code>MP4</code>
** '''For a .ogv video''' Video > <code>Ogg Theora</code>
* Press the large button: "Convert to ..."
Conversion will start. When it is done the new file will be saved.
 
[[File:Miro Video Converter_005.png|300px]]
 
===in Handbrake===
See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/
 
 
== video tag ==
[http://codepen.io/PublicationStation/pen/YpXKQa See code in action in codepen]
<source lang="html4strict">
<video controls>
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4"  type="video/mp4">
</video>
</source>
 
This is the simplest a web video player you can get.
 
 
A <nowiki><video></nowiki> tag encapsulating 1 <nowiki><source></nowiki> tag, that contains the same video mp4 file</nowiki>.
 
The argument <nowiki>controls</nowiki> make sure the video players has controls.
 
 
==audio tag==
If you want to create an audio player, it is similar to video:
 
[http://codepen.io/PublicationStation/pen/rWVNVG See code in action in codepen]
<source lang="html4strict">
<audio controls>
  <source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.mp3"  type="audio/mp3">
</audio>
</source>
 
 
 
== video / audio tag attributes ==
Besides <nowiki>controls</nowiki> the <nowiki><video></nowiki> and <nowiki><audio></nowiki> has a number of other attributes.
 
More on video attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
 
* 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
 
[http://codepen.io/PublicationStation/pen/WovNww See code in action in codepen]
 
<source lang="html4strict">
<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">
</video>
</source>
 
 
== examples video element with CSS==
 
http://codepen.io/PublicationStation/pen/YpXKQa
 
http://codepen.io/PublicationStation/pen/PbqBdP


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> 




==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 <ref name="audiochan">Unlike video, audio typically is in ''stereo'', which means that it has ''2 channels'' or streams</ref>
* possible bitrates: 64 kbps, 128 kbps, 192 kbps
* is patent-encumbered
* Also known as MPEG-1 Audio Layer 3.


===AAC===
=Audio & Video in Public Spaces =
* is patent-encumbered
* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo'']
* number of channels: up to 48
* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html
* Also known as Advanced Audio Coding


===Vorbis===
==homework assignment==
* can be embedded in .ogg (also .mp4, .webm, .mkv) containers
* royalty-free
* number of channels: any


===#1 - video ===
'''Build a web page with a video player, where:'''
* video plays automatically, loops and has a posts


==prepare your files==
As said previously:
<span style="background:yellow">'''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.'''</span> In other words you need to encode your videos into these 2 formats.


There are several solutions to do this, but [http://www.mirovideoconverter.com/ 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''' - with h264 and mp3 codes.
** Audio <code>MP3</code>
** Video <code>MP4</code>


'''For a .ogv video'''
** Audio <code>Ogg Vorbis</code>
** Video <code>Ogg Theora</code>


* Press the large button: "Convert to ..."
------
 
= 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>:


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


<source lang="html4strict">
<source lang="html4strict">
<video width="320" height="240" controls>
<!DOCTYPE html>
   <source src="pr6.mp4"  type="video/mp4; codecs=avc1.42E01E,mp4a.40.2">
<html>
   <source src="pr6.webm" type="video/webm; codecs=vp8,vorbis">
   <head>
   <source src="pr6.ogv"  type="video/ogg; codecs=theora,vorbis">
    <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>
</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>
</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==
== 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'''.
-----


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




Latest revision as of 10:09, 29 November 2018

video sources

https://archive.org/details/movies

https://commons.wikimedia.org/wiki/Main_Page

Simple examples

Video: https://codepen.io/PublicationStation/pen/rQZaLJ

Audio: https://codepen.io/PublicationStation/pen/MOVgON


video codecs and containers explained

Video file formats (.avi .mp4 .ogv .mkv) are containers to video and audio streams

  • Each video format allow specific audio and video codecs
  • codecs are the way by which a audio or video stream is encoded and decoded.

Current web browsers support:

  • video format: .mp4 with streams
    • video encoded with H264 codec
    • audio encodec with AAC (multichannel) or MP3 (stereo) codecs


first, preparing your video files

To be certain that your videos will play in all current browsers, you'll need to have your videos or audio encoded in the codecs above.

There are several solutions to do this:


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

in Handbrake

See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/


video tag

See code in action in codepen 

<video controls>
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.mp4"  type="video/mp4">
</video>

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


A <video> tag encapsulating 1 <source> tag, that contains the same video mp4 file</nowiki>.

The argument controls make sure the video players has controls.


audio tag

If you want to create an audio player, it is similar to video:

See code in action in codepen 

<audio controls>
  <source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.mp3"  type="audio/mp3">
</audio>


video / audio tag attributes

Besides controls the <video> and <audio> has a number of other attributes.

More on video attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

  • 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

See code in action in codepen 

<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">
</video>


examples video element with CSS

http://codepen.io/PublicationStation/pen/YpXKQa

http://codepen.io/PublicationStation/pen/PbqBdP




Audio & Video in Public Spaces

homework assignment

#1 - video

Build a web page with a video player, where:
  • video plays automatically, loops and has a posts




Interaction

media events

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

Here are a few examples[1]:

play / pause with mouseover

See code in action in codepen 

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


move forward / back in currentTime

See code in action in codepen

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 == 'ArrowLeft' ){ video.currentTime=video.currentTime-1;}
  if ( event.key == 'ArrowRight' ){ video.currentTime=video.currentTime+1;}
   })
})
</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.

[2]


more interaction

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


playing

[[1]] CODE pen is not responding

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>

#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.



references

Blog on containers and codecs

AV Codes supported by video containers

notes

  1. ↑ See more examples in: http://www.w3.org/2010/05/video/mediaevents.html http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents
  2. ↑ 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=7118’