1 / 22

HTML5 Media API

HTML5 Media API. 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. HTML 5 Media tags: Audio. Audio tag:

aldan
Download Presentation

HTML5 Media API

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML5 Media API

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

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

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

  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. varmyVideo=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:varmyVideo=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:varmyVideo=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:varmyVideo=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 <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>

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

  18. Test with track support with Modernizr Described in Modernizr documentation: //first run that oneModernizr.addTest('track', function(){ var video = document.createElement('video'); return typeofvideo.addTextTrack === 'function' }); // return TRUE or FALSE Modernizr.track

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

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

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

  22. More Current Implementation • There are a lot of new features that are not implemented yet. • For current information. Check:http://www.longtailvideo.com/html5/

More Related