html55 media api

© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.

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


Supporting Browsers

• Chrome• Firefox• Opera• Safari• Internet Explorer 9+


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<


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

Property for seeking:var myVideo=document.getElementById("video1");

myVideo.duration = X; //SeekmyVideo.currentTime //return seconds myVideo.duration //return duration in secondsmyVideo.seeking //return TRUE\FALSE


Basic API Properties: Volume

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

}


Media eventsabort This event is generated when playback is aborted.

canplay This event is generated when enough data is available that the media can be played.

ended This event is generated when playback completes.

error This event is generated when an error occurs.

loadeddata This event is generated when the first frame of the media has finished loading.

loadstart This event is generated when loading of the media begins.

pause This event is generated when playback is paused.

play This event is generated when playback starts or resumes.

progress This event is generated periodically to inform the progress of the downloading the media.

ratechange This event is generated when the playback speed changes.

seeked This event is generated when a seek operation completes.


More Media Events

seeking This event is generated when a seek operation begins.

suspend This event is generated when loading of the media is suspended.

volumechange This event is generated when the audio volume changes.

waitingThis event is generated when the requested operation (such as playback) is delayed pending the completion of another operation (such as a seek).


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 and Opera 12.10 (The latest version, released in 06.11.12).

• 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 Track00: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/

http://dev.w3.org/html5/webvtt/


WebVTT: Setup the .htaccess<Files mysubtitle.vtt>

ForceType text/vtt;charset=utf-8 </Files>


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 polyfill track fallback

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

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

http://www.internet-israel.com/?p=3489


Full Screen API

• You may use full screen API for ANYTHING!• Right now is being implemented with Safari,

Chrome, Firefox, Opera 12.10 (The latest version, released in 06.11.12).

• Still in draft. Supported with prefixes in Firefox and Chrome\Safari.

• Probably will not be supported on IE10.


Full Screen API: methods and properties

Methods:var myVideo=document.getElementById("video1"); myVideo.requestFullScreen();document.cancelFullScreen()

Property:document.fullScreen;


Full Screen API code example

var myVideo=document.getElementById("video1"); if (myVideo.mozRequestFullScreen) { myVideo.mozRequestFullScreen();} else if (myVideo.webkitRequestFullScreen) { myVideo.webkitRequestFullScreen();} else if (myVideo.RequestFullScreen) { myVideo.RequestFullScreen();} else {

//fallback}


Full Screen iframe attribute

<iframe src="http://www.example.com" width="640" height="360" allowFullScreen></iframe>


Full Screen CSS Pseudo class[useful on other stuff than video]

#myelement:-webkit-full-screen { width: 100% }#myelement:-moz-full-screen { width: 100% }#myelement:full-screen { width: 100% }


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/

http://www.longtailvideo.com/html5/


Thank you

html55 media api

Documents

boolean copyright

html5 media api copyright

video copyright

event handlingdocument

progressthis event

volumechangethis event

playthis event

ratechangethis event