html55 media api

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

HTML5 Media API

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

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

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

Supporting Browsers

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

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

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<

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

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<

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

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

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

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.

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

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

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

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

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

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

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

API Properties: Event handling

document.getElementById(“video1”).addEventListener('ended',myHandler,false);

function myHandler(e) { //your function

}

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

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.

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

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

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

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)

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

Video\Audio subtitles

Why subtitles matters?• Hebrew• Accessibility• SEO

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

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.

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

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>

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

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/

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

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

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

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

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

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

JavaScript polyfill track fallback

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

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

JavaScript track fallback

You can implement your own subtitle JavaScript based system. With or without jQuery. Example: http://www.internet-israel.com/?p=3489

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

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.

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

Full Screen API: methods and properties

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

Property:document.fullScreen;

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

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}

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

Full Screen iframe attribute

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

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

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% }

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

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>

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

More Current Implementation• There are a lot of new features that are not implemented yet.

• For current information. Check:http://www.longtailvideo.com/html5/

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

Thank you