Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 Media API. Who am I Ran Bar-Zik PHP\Drupal Developer at HP Software R&D Working at HP Live Network project. My professional site: internet-israel.com.

Similar presentations


Presentation on theme: "HTML5 Media API. Who am I Ran Bar-Zik PHP\Drupal Developer at HP Software R&D Working at HP Live Network project. My professional site: internet-israel.com."— Presentation transcript:

1 HTML5 Media API

2 Who am I Ran Bar-Zik PHP\Drupal Developer at HP Software R&D Working at HP Live Network project. My professional site: internet-israel.com

3 HTML 5 Media tags: Audio Audio tag: Your browser does not support the audio tag.

4 HTML 5 Media tags: Video Video tag: Your browser does not support the video tag.

5 Supporting Browsers Chrome Firefox Opera Safari Internet Explorer 9+

6 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

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

8 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

9 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

10 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

11 API Properties: Event handling document.getElementById(“video1”).addEventListener(' ended',myHandler,false); function myHandler(e) { //your function }

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

13 Video\Audio subtitles Why subtitles matters? Hebrew Accessibility SEO

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

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

16 Track example

17 WebVTT: Web Video Text Track example 00: > 00: We are in New York City 00: > 00: actually at the Lucern Hotel, just down the street 00: > 00: from the American Museum of Natural History More information on WebVTT is in W3C:

18 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

19 JavaScript track fallback You can Support track elements with captionatorjs (Having problems with IE9)

20 JavaScript track fallback You can implement your own subtitle JavaScript based system. With or without jQuery. Example:

21 HTML 5 Video future feature: mediagroup\ Media Controller Using mediagroup attribute will help sync between movies. Helping to implement commercials embedding, audio commentary etc. Your browser does not support HTML5 video. Your browser does not support HTML5 video.

22 More Current Implementation There are a lot of new features that are not implemented yet. For current information. Check:


Download ppt "HTML5 Media API. Who am I Ran Bar-Zik PHP\Drupal Developer at HP Software R&D Working at HP Live Network project. My professional site: internet-israel.com."

Similar presentations


Ads by Google