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

From Publication Station
Line 4: Line 4:
Playing audio and video on the web is now easy and opens up a lot of possibilities audio-visual interaction and manipulation.
Playing audio and video on the web is now easy and opens up a lot of possibilities audio-visual interaction and manipulation.


 
==Simple example==
Here is a simple example: http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/skies/
http://codepen.io/PublicationStation/pen/YpXKQa
 
Let's see how to get there and develop more interesting audio/visual web works:
 


==first, preparing your video files==
==first, preparing your video files==
<span style="background:yellow">To be certain that your videos will play in all current browsers, you 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>
<span style="background:yellow">To be certain that your videos will play in all current browsers, you need to have videos in '''both .mp4 and .ogv formats.'''</span>  
 
 
{| 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 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.''' <ref name="divehtml">
http://diveintohtml5.info/video.html</ref>
 
'''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="all">All info on av codecs and containers in http://wiki.multimedia.cx/</ref>
 
More on video codecs <reg name="codecs">
H264 (video):
* can be embedded in '''.mp4''' container
* is patent-encumbered
 
Theora (video):
* can be embedded in any codec, but is most common in '''.ogv''' container
* royalty-free
 
MP3 (audio):
* number of channels: 1 or 2
* possible bitrates: 64 kbps, 128 kbps, 192 kbps
* is patent-encumbered
* Also known as MPEG-1 Audio Layer 3.
 
AAC (audio)
* Also known as Advanced Audio Coding
* number of channels: up to 48
* is patent-encumbered


Vorbis (audio)
* can be embedded in .ogg (also .mp4, .webm, .mkv) containers
* royalty-free
* number of channels: any
</ref>


==prepare your files==
==prepare your files==
Line 71: Line 15:
<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.
<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.
There are several solutions to do this, but [http://www.getmiro.com/ Miro video converter] seems to do well, converting both to .mp3 and .ogg.
 
Download Miro from http://www.mirovideoconverter.com/


Download Miro from http://www.getmiro.com/download/
===in Miro===
===in Miro===
* Select the file you want to convert to .ogv and .mp4
* Select the file you want to convert to .ogv and .mp4
Line 86: Line 29:


== video tag ==
== video tag ==
[http://codepen.io/PublicationStation/pen/YpXKQa See code in action in codepen]
<source lang="html4strict">
<source lang="html4strict">
<video controls>
<video controls>
Line 102: Line 47:
If you want to create an audio player, it is similar to video:  
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">
<source lang="html4strict">
<audio controls>
<audio controls>
Line 110: Line 56:


== video / audio tag attributes ==
== video / audio tag attributes ==
Besides <nowiki>controls</nowiki> the <nowiki><video></nowiki> has a number of other attributes.<ref name="attributes">Read more on video attributes in https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video</ref>
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
* controls - if present, show  player's controls
Line 118: Line 66:
* height
* height
* width
* width
[http://codepen.io/PublicationStation/pen/WovNww See code in action in codepen]


<source lang="html4strict">
<source lang="html4strict">
Line 125: Line 75:
</video>
</video>
</source>
</source>
=Video in Public Spaces =
* Janet Cardiff: [https://www.youtube.com/watch?v=Tgef5gel4sk ''Ghost Machine'' ]
* Janet Cardiff: [https://www.youtube.com/watch?v=sOkQE7m31Pw ''Alter Bahnhof Video Walk'']
* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo'']
* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html
------
= Interaction =


==media events==
==media events==
Line 132: Line 91:


=== play / pause with mouseover ===
=== play / pause with mouseover ===
[http://codepen.io/PublicationStation/pen/GNJRER See code in action in codepen]
<source lang="html4strict">
<source lang="html4strict">
<!DOCTYPE html>
<!DOCTYPE html>
Line 169: Line 130:
</source>
</source>


=== move currentTime ===
move currentTime to 20 seconds, when space bar is pressed.


<source lang="html4strict">
=== move forward / back in currentTime ===
<script>
[http://codepen.io/PublicationStation/pen/jVPOmy See code in action in codepen]
  $(document).ready(
  function(){
  video = $('video#testvideo')[0]; //video player on to variable
 
      $( 'body').keydown(function( event ) {
          console.log(event);
          if ( event.key == 'Enter' ) {
              video.currentTime=20;
          }
 
      })


})
</script>
</source>
=== move forward / back in currentTime ===
Left and right arrow keys change video's currenttime.
Left and right arrow keys change video's currenttime.
<source lang="html4strict">
<source lang="html4strict">
Line 197: Line 140:
   function(){
   function(){
   video = $('video#testvideo')[0]; //video player on to variable
   video = $('video#testvideo')[0]; //video player on to variable
 
$( 'body').keydown(function( event ) {
      $( 'body').keydown(function( event ) {
  console.log(event);
          console.log(event);
  if ( event.key == 'ArrowLeft' ){ video.currentTime=video.currentTime-1;}
          if ( event.key == 'ArrowRight' ) {
  if ( event.key == 'ArrowRight' ){ video.currentTime=video.currentTime+1;}
              video.currentTime+=5;
  })
          }
 
          else if (event.key == 'ArrowLeft') {
              video.currentTime-=5;
          }
 
      })
 
})
})
</script>
</script>
Line 244: Line 179:
* volumechange -  Either the volume attribute or the muted 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>
<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 ===
=== 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.
In these example, while playing change the body's background to black and when paused to white.
   
   
Line 292: Line 233:


===#1 - video ===
===#1 - video ===
In same groups for the squares' intervention, '''Build a web page with a video player, where:
'''Build a web page with a video player, where:'''
'''
* video contain both .ogv and .mp4 source video files
* video contain both .ogv and .mp4 source video files
===#2 video ===
Once you learn JS
* includes an event listener that changes something on your page or the video   
* 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'''.
* the user can interact with video events, '''without using the video player's controls'''.


If you can make it relate to the square - the place, your research, your intervention - you are working in.
===#2 - intervention documentation ===
In same [[Courses/Design_%26_Technique-Essential_Web_Design/Q2/Squares_and_groups|groups]]of the square intervention, '''meet and discuss what you want to make for your square invention, on the Web'''. 
It can be:
* documentation: a &quot;recordings&quot; of the intervention
* behind the scenes of the intervention: a glimpse on to the process that led to your intervention - photos, archive searches, interviews.
* part of the intervention: a tool, interface, or guide to the invention
Bring in your ideas and sketches next week. We'll discuss discuss a plan to best achieve your goals.


-----


-----


=video sources=
=video sources=
https://archive.org/details/movies
https://archive.org/details/movies


=references=
=references=

Revision as of 18:39, 7 November 2016

audio and video in HTML5

HMTL5 includes a standard way to embed audio and video tags, without the use of flash.

Playing audio and video on the web is now easy and opens up a lot of possibilities audio-visual interaction and manipulation.

Simple example

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

first, preparing your video files

To be certain that your videos will play in all current browsers, you need to have videos in both .mp4 and .ogv formats.


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 do well, converting both to .mp3 and .ogg.

Download Miro from http://www.getmiro.com/download/

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

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

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">
  <source src="https://ia802608.us.archive.org/15/items/OTRR_X_Minus_One_Singles/XMinusOne55-04-24001NoContact.ogg"  type="audio/ogg">
</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">
  <source src="http://publicationstation.wdka.hro.nl/go-student/Andre-Castro/videos/tour.ogv"  type="video/ogg">
</video>

Video in Public Spaces

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


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>

homework assignment

#1 - video

Build a web page with a video player, where:
  • video contain both .ogv and .mp4 source video files

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



video sources

https://archive.org/details/movies

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