Difference between revisions of "Courses/Design & Technique-Essential Web Design/Q2/06"
(26 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
==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 codecs and containers explained== | ||
Video | 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 | There are several solutions to do this: | ||
* [https://handbrake.fr/ Handbrake] | |||
* [http://www.mirovideoconverter.com/ Miro] | |||
===in Miro=== | ===in Miro=== | ||
Line 77: | Line 40: | ||
[[File:Miro Video Converter_005.png|300px]] | [[File:Miro Video Converter_005.png|300px]] | ||
===in Handbrake=== | |||
See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/ | |||
== 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> | ||
<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"> | ||
</video> | </video> | ||
</source> | </source> | ||
Line 88: | Line 56: | ||
This is the simplest a web video player you can get. | This is the simplest a web video player you can get. | ||
A <nowiki><video></nowiki> tag encapsulating | |||
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. | The argument <nowiki>controls</nowiki> make sure the video players has controls. | ||
== video tag attributes == | ==audio tag== | ||
Besides <nowiki>controls</nowiki> the <nowiki><video></nowiki> has a number of other attributes. | 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 | * controls - if present, show player's controls | ||
Line 103: | Line 86: | ||
* width | * width | ||
[http://codepen.io/PublicationStation/pen/WovNww See code in action in codepen] | |||
<source lang="html4strict"> | <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"> | <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.mp4" type="video/mp4"> | ||
</video> | </video> | ||
</source> | </source> | ||
== examples video element with CSS== | |||
http://codepen.io/PublicationStation/pen/YpXKQa | |||
http://codepen.io/PublicationStation/pen/PbqBdP | |||
=Audio & Video in Public Spaces = | |||
* LUSTlab: [http://lust.nl/#projects-3478 ''Urban Echo''] | |||
* http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html | |||
==homework assignment== | |||
===#1 - video === | |||
'''Build a web page with a video player, where:''' | |||
* video plays automatically, loops and has a posts | |||
------ | |||
= Interaction = | |||
==media events== | ==media events== | ||
Using Javascript and jQuery is possible to interactively control the 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>: | 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 === | ||
[http://codepen.io/PublicationStation/pen/GNJRER See code in action in codepen] | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!DOCTYPE html> | <!DOCTYPE html> | ||
Line 130: | Line 147: | ||
<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"> | <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"> | ||
</video> | </video> | ||
</div> | </div> | ||
Line 153: | Line 169: | ||
</source> | </source> | ||
=== move forward / back in currentTime === | === 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. | Left and right arrow keys change video's currenttime. | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
Line 162: | Line 179: | ||
function(){ | function(){ | ||
video = $('video#testvideo')[0]; //video player on to variable | 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> | </script> | ||
Line 209: | Line 218: | ||
* 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 === | ||
In these example,while playing change the body's background to black and when paused to white. | [[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"> | <source lang="html4strict"> | ||
Line 246: | Line 261: | ||
}) | }) | ||
</script> | </script> | ||
Line 253: | Line 267: | ||
</source> | </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'''. | |||
----- | |||
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
- For a .mp4 video Video >
- Press the large button: "Convert to ..."
Conversion will start. When it is done the new file will be saved.
in Handbrake
See https://www.techspot.com/article/1131-hevc-h256-enconding-playback/
video tag
<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:
<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
<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
- LUSTlab: Urban Echo
- http://publicationstation.wdka.hro.nl/go-student/Q2/Beursplein/rules-video2.html
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
<!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
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.
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
AV Codes supported by video containers
notes
- ↑ See more examples in: http://www.w3.org/2010/05/video/mediaevents.html http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents
- ↑ Full list of media events: http://www.w3.org/TR/html5/embedded-content-0.html#mediaevents