{"id":25810,"date":"2011-12-16T09:44:21","date_gmt":"2011-12-16T14:44:21","guid":{"rendered":"http:\/\/danielschristian.com\/learning-ecosystems\/?p=25810"},"modified":"2011-12-16T09:49:26","modified_gmt":"2011-12-16T14:49:26","slug":"diveintohtml5-com-video-on-the-web","status":"publish","type":"post","link":"http:\/\/danielschristian.com\/learning-ecosystems\/2011\/12\/16\/diveintohtml5-com-video-on-the-web\/","title":{"rendered":"DiveIntoHTML5.com — Video on the web"},"content":{"rendered":"

Video on the web<\/a><\/strong> — from DiveIntoHTML5.com<\/p>\n

Excerpt:<\/em><\/p>\n

Anyone who has visited YouTube.com in the past four years knows that you can embed video in a web page. But prior to HTML5<\/abbr>, there was no standards-based way to do this. Virtually all the video you\u2019ve ever watched \u201con the web\u201d has been funneled through a third-party plugin \u2014 maybe QuickTime, maybe RealPlayer, maybe Flash. (YouTube uses Flash.) These plugins integrate with your browser well enough that you may not even be aware that you\u2019re using them. That is, until you try to watch a video on a platform that doesn\u2019t support that plugin.<\/p>\n

HTML5<\/abbr> defines a standard way to embed video in a web page, using a <video><\/code> element. Support for the <video><\/code> element is still evolving, which is a polite way of saying it doesn\u2019t work yet. At least, it doesn\u2019t work everywhere. But don\u2019t despair! There are alternatives and fallbacks and options galore.<\/p>\n

…<\/p>\n

\n

Professor Markup Says<\/strong>
\nThere is no single combination of containers and codecs that works in all HTML5 browsers. This is not likely to change in the near future. To make your video watchable across all of these devices and platforms, you\u2019re going to need to encode your video more than once.<\/span><\/p>\n

For maximum compatibility, here\u2019s what your video workflow will look like:<\/p>\n

    \n
  1. Make one version that uses WebM (VP8 + Vorbis).<\/li>\n
  2. Make another version that uses H.264 baseline video and AAC \u201clow complexity\u201d audio in an MP4 container.<\/li>\n
  3. Make another version that uses Theora video and Vorbis audio in an Ogg container.<\/li>\n
  4. Link to all three video files from a single <video><\/code> element, and fall back to a Flash-based video player.<\/li>\n<\/ol>\n<\/blockquote>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Video on the web — from DiveIntoHTML5.com Excerpt: Anyone who has visited YouTube.com in the past four years knows that you can embed video in a web page. But prior to HTML5, there was no standards-based way to do this. Virtually all the video you\u2019ve ever watched \u201con the web\u201d has been funneled through a […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[9,98],"tags":[571,93,727],"class_list":["post-25810","post","type-post","status-publish","format-standard","hentry","category-digital-video","category-elearning","tag-digital-video","tag-e-learning","tag-html-5"],"_links":{"self":[{"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/posts\/25810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/comments?post=25810"}],"version-history":[{"count":5,"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/posts\/25810\/revisions"}],"predecessor-version":[{"id":25812,"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/posts\/25810\/revisions\/25812"}],"wp:attachment":[{"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/media?parent=25810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/categories?post=25810"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/danielschristian.com\/learning-ecosystems\/wp-json\/wp\/v2\/tags?post=25810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}