1. HTML5 Media API

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

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

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

5. Supporting Browsers
Chrome
Firefox
Opera
Safari
Internet Explorer 9+

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

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

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

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

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

11. API Properties: Event handling
document.getElementById(“video1”).addEventListener('ended',myHandler,false); function myHandler(e) { //your function }

12. 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)

13. Video\Audio subtitles
Why subtitles matters?
Hebrew
Accessibility
SEO

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

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

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

17. WebVTT: Web Video Text Track example
00: > 00: We are in New York City 00: > 00: actually at the Lucern Hotel, just down the street 00: > 00: from the American Museum of Natural History More information on WebVTT is in W3C:

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

19. JavaScript track fallback
You can Support track elements with captionatorjs (Having problems with IE9)

20. JavaScript track fallback
You can implement your own subtitle JavaScript based system. With or without jQuery. Example:

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

22. More Current Implementation
There are a lot of new features that are not implemented yet.
For current information. Check: