HTML55 media api

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
• PHPDrupal 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

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

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 MethodsProperties:
Play
Methods for play pause:
myVideo.play();
myVideo.pause();

Property for play pause:
myVideo.paused; //return TRUEFALSE


Basic API MethodsProperties:
Seek
Property for seeking:

myVideo.duration = X; //Seek
myVideo.currentTime return seconds
myVideo.duration //return duration in seconds
myVideo.seeking //return TRUEFALSE


Basic API Properties: Volume

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 events
abort 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 2012 Hewlett-Packard Development Company, L.P. The information contained hereinoperation completes.
© Copyright
This event is generated when a seek 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.

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


API MethodsProperties:
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)


VideoAudio subtitles
Why subtitles matters?
• Hebrew
• Accessibility
• SEO


Using track tag
• Simple way for implementing Subtitles.
• Right now is being implemented by
SafariChrome 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 Track
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/


WebVTT: Setup the .htaccess
<Files mysubtitle.vtt>
ForceType text/vtt;charset=utf-8
</Files>


Test with track support with
Modernizrdocumentation:
Described in Modernizr

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


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 ChromeSafari.
• Probably will not be supported on IE10.

Full Screen API: methods and
properties
Methods:
myVideo.requestFullScreen();
document.cancelFullScreen()

Property:
document.fullScreen;


Full Screen API code example

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 100% }
#myelement:-webkit-full-screen { width:
video]
#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/


Thank you


HTML55 media api

More Related Content

What's hot (20)

Similar to HTML55 media api (20)

More from Ran Bar-Zik (11)

HTML55 media api