HTML55 media api
Upcoming SlideShare
Loading in...5
×
 

HTML55 media api

on

  • 1,131 views

Slide show from my lecture at HTML5Fest 2012!

Slide show from my lecture at HTML5Fest 2012!

Statistics

Views

Total Views
1,131
Views on SlideShare
831
Embed Views
300

Actions

Likes
0
Downloads
2
Comments
0

2 Embeds 300

http://www.internet-israel.com 299
https://internet-israel.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML55 media api HTML55 media api Presentation Transcript

  • 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 © 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: AudioAudio 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 © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  • HTML 5 Media tags: VideoVideo 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 © 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 MethodsProperties: PlayMethods for play pause:var myVideo=document.getElementById("video1");myVideo.play();myVideo.pause();Property for play pause:myVideo.paused; //return TRUEFALSE © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  • Basic API MethodsProperties: SeekProperty for seeking:var myVideo=document.getElementById("video1");myVideo.duration = X; //SeekmyVideo.currentTime return secondsmyVideo.duration //return duration in secondsmyVideo.seeking //return TRUEFALSE © Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  • Basic API Properties: Volumevar myVideo=document.getElementById("video1");myVideo.volume //returns volume (0-1)myVideo.volume = X //define the video volumemyVideo.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 handlingdocument.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 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).© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.
  • API MethodsProperties: Ready StateProperty 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 thenext 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.
  • VideoAudio subtitlesWhy 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 SafariChrome 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.000We are in New York City00:13.000 --> 00:16.000actually at the Lucern Hotel, just down the street00:16.000 --> 00:18.000from the American Museum of Natural HistoryMore 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 Modernizrdocumentation:Described in Modernizr//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 fallbackYou 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 fallbackYou can implement your own subtitle JavaScript based system. With orwithout 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 ChromeSafari.• 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 propertiesMethods: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 examplevar 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 100% }#myelement:-webkit-full-screen { width: video]#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© Copyright 2012 Hewlett-Packard Development Company, L.P. The information contained herein is subject to change without notice.