HTML5 Media API
Who am I
•
•
•
•
Ran Bar-Zik \ @barzik
PHP\Drupal Developer at HP Software R&D
Working at HP Live Network project.
My professional site: internet-israel.com
HTML 5 Media tags: Audio
Audio tag:
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mp3">
Your browser does not support the audio tag.
</audio>
HTML 5 Media tags: Video
Video tag:
<video controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Supporting Browsers
•
•
•
•
•
Chrome
Firefox
Opera
Safari
Internet Explorer 9+
Media Tags Attribute
•
•
•
•
•
src = URL - The source of the media
Autoplay = Boolean
Loop = Boolean
Controls = Boolean
Preload = auto(yes), metadata(only meta data) or
none
Video only:
• Poster = URL - The source of the poster
• Muted = Boolean
Media DOM API
• All Media tags is valid HTML elements.
• All HTML attributes can be changed via
JavaScript as any other elements.
var myVideo=document.getElementById("video1");
myVideo.width=560;
• This code will change the width of the video.
Basic API Methods\Properties: Play
Methods for play \ pause:
var myVideo=document.getElementById("video1");
myVideo.play();
myVideo.pause();
Property for play \ pause:
myVideo.paused; //return TRUE\FALSE
Basic API Methods\Properties: Seek
Methods for play \ pause:
var myVideo=document.getElementById("video1");
myVideo.duration = X; //Seek
Property for seeking:
myVideo.currentTime //return seconds
myVideo.duration //return duration in seconds
myVideo.seeking //return TRUE\FALSE
Basic API Properties: Volume
Properties for play \ pause:
var myVideo=document.getElementById("video1");
myVideo.volume //returns volume (0-1)
myVideo.volume = X //define the video volume
myVideo.muted // returns FALSE/TRUE
API Properties: Event handling
document.getElementById(“video1”).addEventListener('
ended',myHandler,false);
function myHandler(e) {
//your function
}
API Methods\Properties: Ready State
Property for finding the ready state:
myVideo.readyState; //return ready state code
0 - nothing
1 – meta data available (duration)
2 – have current data (enough for current frame)
3 – have future data (enough for this frame and the
next one).
4 – have enough data (can finish the show)
Video\Audio subtitles
Why subtitles matters?
• Hebrew
• Accessibility
• SEO
Using track tag
• Simple way for implementing Subtitles.
• Right now is being implemented by
Safari\Chrome only.
• In the future – it will be the best practice –
SEO wise.
Using track tag
• Simple way for implementing Subtitles.
• Right now is being implemented by
Safari\Chrome only.
• In the future – it will be the best practice –
SEO wise.
Track example
<video src="foo.ogv">
<track kind="subtitles" label="English subtitles"
src="subtitles_en.vtt" srclang="en" default>
</track>
<track kind="subtitles" label="Deutsche Untertitel"
src="subtitles_de.vtt" srclang="de">
</track>
</video>
WebVTT: Web Video Text Track
example
00:11.000 --> 00:13.000
We are in New York City
00:13.000 --> 00:16.000
actually at the Lucern Hotel, just down the street
00:16.000 --> 00:18.000
from the American Museum of Natural History
More information on WebVTT is in W3C: http://dev.w3.org/html5/webvtt/
Test with track support with Modernizr
Described in Modernizr documentation:
//first run that one
Modernizr.addTest('track', function(){
var video = document.createElement('video');
return typeof video.addTextTrack === 'function'
});
// return TRUE or FALSE
Modernizr.track
JavaScript track fallback
You can Support track elements with captionatorjs
(Having problems with IE9)
http://captionatorjs.com/
JavaScript track fallback
You can implement your own subtitle JavaScript based system. With or
without jQuery.
Example: http://www.internet-israel.com/?p=3489
HTML 5 Video future feature:
mediagroup\ Media Controller
• Using mediagroup attribute will help sync between movies.
• Helping to implement commercials embedding, audio commentary etc.
<video id="video1" controls="controls" mediagroup="test">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<video id="video2" controls="controls" mediagroup="test">
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
More Current Implementation
• There are a lot of new features that are not
implemented yet.
• For current information. Check:
http://www.longtailvideo.com/html5/