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

More Current Implementation There are a lot of new features that are not implemented yet. For current information. Check: http://www.longtailvideo.com/html5/