canmove, Confirmed users
1,953
edits
Engagement/Developer Engagement/Grab bag: Difference between revisions
Jump to navigation
Jump to search
Engagement/Developer Engagement/Grab bag (view source)
Revision as of 20:15, 6 September 2011
, 6 September 2011→HTML5 Video
| Line 77: | Line 77: | ||
* Videos can easily interact with other parts of the page and can even get generated dynamically. A plugin always was a black box of unknown in your document | * Videos can easily interact with other parts of the page and can even get generated dynamically. A plugin always was a black box of unknown in your document | ||
* [http://isithackday.com/syncing-video/ Syncing HTML5 video with page content] is a demo that shows how to use data- attributes to show and hide content in a page at a certain time [http://cf.cdn.vid.ly/5e2v2g/webm.webm webm] [http://cf.cdn.vid.ly/5e2v2g/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5e2v2g/ogv.ogv ogv] | * [http://isithackday.com/syncing-video/ Syncing HTML5 video with page content] is a demo that shows how to use data- attributes to show and hide content in a page at a certain time [http://cf.cdn.vid.ly/5e2v2g/webm.webm webm] [http://cf.cdn.vid.ly/5e2v2g/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5e2v2g/ogv.ogv ogv] — I normally follow this up by explaining and showing [http://popcornjs.org/ Popcorn.js] | ||
* [http://www.thisshell.com/ This Shell] is a clever way of re-using a Canvas+video demo to promote a song. You need to put the video together as a puzzle and when you manage to do it on time you can download the song [http://cf.cdn.vid.ly/5y4i9j/webm.webm webm] [http://cf.cdn.vid.ly/5y4i9j/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5y4i9j/ogv.ogv ogv] | * [http://www.thisshell.com/ This Shell] is a clever way of re-using a Canvas+video demo to promote a song. You need to put the video together as a puzzle and when you manage to do it on time you can download the song [http://cf.cdn.vid.ly/5y4i9j/webm.webm webm] [http://cf.cdn.vid.ly/5y4i9j/mp4.mp4 mp4] [http://cf.cdn.vid.ly/5y4i9j/ogv.ogv ogv] | ||
* There was a [https://developer.mozilla.org/en-US/demos/devderby/2011/july/ Mozilla Dev Derby on HTML5 video] with great examples of what can be done with open video. | * There was a [https://developer.mozilla.org/en-US/demos/devderby/2011/july/ Mozilla Dev Derby on HTML5 video] with great examples of what can be done with open video. | ||
Issues with HTML5 video | ====Issues with HTML5 video==== | ||
Of course not everything is rosy about HTML5 video at the moment and the following things are constantly brought up in Q&A sessions with audiences. It is important to make the message clear that there are some issues with it and that sometimes Flash video is the better option (less and less though). | Of course not everything is rosy about HTML5 video at the moment and the following things are constantly brought up in Q&A sessions with audiences. It is important to make the message clear that there are some issues with it and that sometimes Flash video is the better option (less and less though). | ||
* '''Different codecs for different browsers''' | * '''Different codecs for different browsers''' — there is a discord among browser vendors when it comes to defining what constitutes HTML5 video. Whilst Microsoft and Apple favour mp4 files with [http://en.wikipedia.org/wiki/H.264/MPEG-4_AVC H.264] encoding (which is also the format for Blue Ray discs), Google, Opera and Mozilla went for fully open codec formats like [http://en.wikipedia.org/wiki/Theora Ogg Video] and [http://en.wikipedia.org/wiki/Webm Web-M]. This means a few annoying things: | ||
** If you want to support all HTML5 browsers with your videos, you have to convert them into three formats. | |||
** If you also want to support different mobiles and tablets you will also have to create the video in different resolutions and sizes. | ** If you also want to support different mobiles and tablets you will also have to create the video in different resolutions and sizes. | ||
** One simple way to do this is to use online services. [http://archive.org Archive.org] for example automatically converts hosted videos (which have to be licensed with Creative Commons or Public Domain) you upload to OGG and MP4, so all you need to do is create a WebM version. | ** One simple way to do this is to use online services. [http://archive.org Archive.org] for example automatically converts hosted videos (which have to be licensed with Creative Commons or Public Domain) you upload to OGG and MP4, so all you need to do is create a WebM version. | ||
** [http://vid.ly Vid.ly] converts videos to 20 formats and provides you with a URL that redirects different browsers, mobiles and consoles to the right format automatically. | ** [http://vid.ly Vid.ly] converts videos to 20 formats and provides you with a URL that redirects different browsers, mobiles and consoles to the right format automatically. | ||
* '''HTML5 video is open | * '''HTML5 video is open, and so is the source file''' — if people want to offer video in HTML5, then the files will be possible to download. YouTube's HTML5 player goes through a proxy server to prevent this but it can be easily fooled. If people want DRM in their files and prevent users from downloading them they need to use Silverlight or Flash (or host the files on a login-protected server). | ||
=== HTML5 Audio === | === HTML5 Audio === | ||