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

noneVideo 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 secondsmyVideo.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 handlingdocument.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 code0 - nothing1 – 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 oneModernizr.addTest('track', function {)(

var video = document.createElement('video') ;return typeof video.addTextTrack === 'function '

;)}

//return TRUE or FALSEModernizr.track

JavaScript track fallbackYou can Support track elements with captionatorjs(Having problems with IE9)http://captionatorjs.com/

JavaScript track fallbackYou 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/