Video for everyone
•Als KEY, PDF herunterladen•
0 gefällt mir•1,007 views
My Bristol SkillSwap talk on HTML5 video. How we start using it, why we need to start using it and the future of video in our multi-platform landscape.
Empfohlen
Weitere ähnliche Inhalte
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Empfohlen
Empfohlen (20)
Video for everyone
- 1. @nickwforsberg Video for all Nick Forsberg @nickwforsberg March 2012 Hello
- 2. @nickwforsberg ★ Codecs ★ The Landscape ★ Performance ★ <video> ★ Players ★ Creating your own content ★ The Real world ★ Accessibility - Video for all ★ Fun ★ Future Forward ★ Show jumping unicorns Video for all
- 3. @nickwforsberg Native video format support Browser Latest stable release Ogg Theora H.264 VP8 (WebM) Internet Explorer 9.0.2 Plugin 9.0 Plugin Mozilla Firefox 10.0.2 3.5 Plugin 4.0 Google Chrome 17.0.9 3.0 5.0 6.0 Chromium N/A r18297 Plugin r47759 Android browser N/A 2.3 3.0 2.3 Safari 5.1.4 Plugin 3.1 Plugin Opera 11.61 10.50 No 10.60 Konqueror 4.8.1 4.4 Plugin Yes Epiphany 3.2.2 2.28 Plugin Yes Codecs
- 4. @nickwforsberg 1,890,499 impressions from 417 different referrals Oct 1, 2011 - Feb 29, 2012 6 months of stats for The Browser Landscape
- 5. @nickwforsberg 224,772 IE impressions of which 64% won’t support HTML5 video Oct 1, 2011 - Feb 29, 2012 6 months of stats for The Browser Landscape
- 6. @nickwforsberg Cisco Mobile data usage for 2011 onwards ★ Mobile video traffic exceeded 50 percent for the first time in 2011. Mobile video traffic was 52 percent of traffic by the end of 2011. ★ Two-thirds of the world's mobile data traffic will be video by 2016. Mobile video will increase 25-fold between 2011 and 2016, accounting for over 70 percent of total mobile data traffic by the end of the forecast period Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update, 2011–2016 http://tinyurl.com/cisco-mobile-usage The Platform Landscape
- 7. @nickwforsberg Nielsen Wire - market share 2011 Android remains the most As the smartphone market continues to expand, popular smartphone operating system in the United States, with 43 percent of the market, while Apple is the top smartphone manufacturer, with 28 percent of smartphone consumers sporting an Apple iPhone. http://tinyurl.com/nielsenwire-online-mobile The Platform Landscape
- 8. @nickwforsberg The Windows Phone Developer Blog HTML5 Video Support in IE9 Mobile - Oct 2011 most visible and easily “HTML5 video is one of the adoptable features of the HTML5 standard. It is even more important on smartphones, because there isn’t another standard for delivering video that works across all major mobile browsers, making HTML5 video the only interoperable way to embed video on web pages.” http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/10/13/html5-video-support-in-ie9- mobile.aspx The Platform Landscape
- 9. @nickwforsberg Some totally OTT YouTube stats! ★ 500 years of YouTube video are watched every day on Facebook, and over 700 YouTube videos are shared on Twitter each minute. ★ 60 hours of video are uploaded every minute, or one hour of video is uploaded to YouTube every second. ★ Over 4 billion videos are viewed a day ★ Over 800 million unique users visit YouTube each month ★ YouTube mobile gets over 600 million views a day, and traffic from mobile devices tripled in 2011 YouTube Press Release on video statistics http://www.youtube.com/t/press_statistics The Platform Landscape
- 10. @nickwforsberg Using Chrome watching ‘HTML5 vs Flash, CPU usage compare’ on YouTube Flash HTML5 http://www.youtube.com/watch?v=6wRUFJ9TKWA Performance
- 11. @nickwforsberg Using Firefox watching ‘HTML5 vs Flash, CPU usage compare’ on YouTube Flash HTML5 http://www.youtube.com/watch?v=6wRUFJ9TKWA Performance
- 12. @nickwforsberg Using Safari watching ‘HTML5 vs Flash, CPU usage compare’ on YouTube Flash HTML5 http://www.youtube.com/watch?v=6wRUFJ9TKWA Performance
- 13. @nickwforsberg At least from a CPU utilisation perspective, Flash isn't BAD and HTML5 isn't GOOD. It all depends upon the platform and implementation. http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html Performance
- 14. @nickwforsberg The Basic Tag <video id="video-1" poster="intro.png" title="a title" width="640" height="360" controls> ! <source src="intro.ogv" type="video/ogg" /> ! <source src="intro.mp4" type="video/mp4" /> ! <source src="intro.webm" type="video/webm" /> <p>Fall back content can go here</p> </video> <video>
- 15. @nickwforsberg Video for everyone!!! by Kroc Camen <!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise --> <!-- warning: playback does not work on iPad/iPhone if you include the poster attribute! fixed in iOS4.0 --> <video width="640" height="360" controls> ! <!-- MP4 must be first for iPad! --> ! <source src="__VIDEO__.MP4" type="video/mp4" /><!-- WebKit video --> ! <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera --> ! <!-- fallback to Flash: --> ! <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> ! ! <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --> ! ! <param name="movie" value="__FLASH__.SWF" /> ! ! <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> ! ! <!-- fallback image. note the title field below, put the title of the video there --> ! ! <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" ! ! title="No video playback capabilities, please download the video below" /> ! </object> </video> <!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want --> <p><strong>Download Video:</strong> Closed Format:!<a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a></p> <video>
- 16. @nickwforsberg Polyfills = Fallbackforward vs a full player ★ http://html5please.com/#video ★ http://mediaelementjs.com/ ★ http://praegnanz.de/html5video/ What’s the difference? Players
- 17. @nickwforsberg Real world applications ★ The YouTube player is embedded across tens of millions of websites ★ A simple change to the embed code means we can start to <iframe id="player" type="text/html" width="640" height="390" src="http://www.youtube.com/embed/ 6wRUFJ9TKWA? wmode=transparent&enablejsapi=1&showinfo=0&html5=1" frameborder="0" scrolling="no"></iframe> A Real World Application
- 18. @nickwforsberg Encoding, serving and testing ★ Miro, Firefogg, Handbrake, FFMPEG ★ Check your server is serving the correct MIME type AddType video/ogg .ogv AddType video/mp4 .mp4 AddType video/webm .webm ★ Try and get as many devices possible to do real world testing ★ For mobiles don’t rely on simulators Creating and serving your own content
- 19. @nickwforsberg Accessible Controls ★ tab accessible play, transport bar and volume buttons ★ space bar for play/pause toggle ★ left/right arrow for navigation ★ up/down arrow for volume ★ Opera rules Accessibility - Video for all
- 20. @nickwforsberg Captions and subtitles <video id="video-1" poster="intro.png" title="a title" width="640" height="360" controls> ! <source src="intro.ogv" type="video/ogg" /> ! <source src="intro.mp4" type="video/mp4" /> ! <source src="intro.webm" type="video/mp4" /> <track kind="captions" srclang="en" src="video_cc_en.vtt"> <track kind="subtitles" srclang="de" src="video_sub_de.vtt"> </video> Accessibility - Video for all
- 21. @nickwforsberg Fun stuff ★ http://www.dailymotion.com/html5 ★ http://www.thewildernessdowntown.com/ ★ http://www.allisnotlo.st/index_en.html Fun
- 22. @nickwforsberg So... ★ Video on a huge increase ★ Mobile usage of video on massive increase ★ Flash Player discontinued on the mobile platform ★ Easy to implement HTML5 using YouTube and Brightcove ★ HTML5 video player opens new opportunities for Accessibility ★ Help push the technology forward by using it! Future Forward
- 23. @nickwforsberg Thanks Nick Forsberg @nickwforsberg http://seventy6.tumblr.com/ http://www.coull.com/ Bye
- 24. @nickwforsberg ★ http://www.dailymotion.com/html5 ★ http://sublimevideo.net ★ http://www.youtube.com/html5 ★ http://camendesign.com/code/video_for_everybody ★ http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/ ★ http://benward.me/blog/understand-the-web ★ http://mediaelementjs.com ★ http://www.whatwg.org/specs/web-apps/current-work/#video ★ http://www.streaminglearningcenter.com/articles/flash-player-cpu-hog-or-hot-tamale-it-depends-.html ★ http://mobithinking.com/mobile-marketing-tools/latest-mobile-stats#smartphone-shipments ★ http://windowsteamblog.com/windows_phone/b/wpdev/archive/2011/10/13/html5-video-support-in-ie9- mobile.aspx ★ http://www.youtube.com/t/press_statistics ★ http://praegnanz.de/html5video/ ★ http://www.zdnet.com/blog/bott/microsoft-fires-back-at-critics-of-its-html5-strategy/2095?tag=content;siu- container ★ http://semanticweb.com/the-future-of-video-on-the-web-a-discussion-with-googler-thomas-steiner-about-the- %E2%80%9Csemantic-web-video-semwebvid%E2%80%9D-project_b21160 ★ http://diveintohtml5.info/video.html ★ http://html5videoguide.net/presentations/OZeWAI2011 Codecs ★ http://www.mirovideoconverter.com/ Resources
Hinweis der Redaktion
- I work for coull LTD\nWe&#x2019;re a video performance network... \nBasically, we take affiliated links from retailers and overlay them on their video content and supply a simple iframe embed format for publishers to takeaway.\nWe have a mixed demographic - across many different markets and user types \nI will be referencing Coull in relation to ways we implement video\n
- i don&#x2019;t want to get too techy in this talk. More of a bigger picture of the video market\nA few examples and maybe a few lines of code. \n
- As you can see it&#x2019;s a varied platform\nSo the question is - when will Chrome drop support for H.264?\nH.264 licence - are we safe to invest in it? Does anybody have any experience in this?\n
- So good news - our favourite browsers are winning the game. well mine at least.\n 1.8 million impressions from 417 different referrars\n IE has 11.89% of the market - 224,772 impressions\n This differers from the average market share of 29% ish \n
- IE has 11.89% of our traffic - 224,772 impressions\n Of which roughly 64% doesn&#x2019;t support HTML5 video\n However this equates for 7.8% of our networks traffic\n So we have to respect them and use a polyfill / fallback solution\n\n
- Based on CISCO&#x2019;s Forecast\n So we will obviously have a massive demand for video delivery for mobile devices in the future \n\n
- Within the COULL network we have seen a growth of mobile use over the last 6 months\n RIM Blackberry 7 OS introduced HTML5 video support. Previously Flash only. Can anybody expand on this?\n\n
- Really interesting statement. This kinda sums up my whole talk!\n Although we know windows desperate to take some of the market share. It&#x2019;s easy to take pop shots at windows - but they have always been pushing the web forward. \n Ahem, Sometimes in the wrong way!\n\n
- So some big numbers from YouTube\n The main reason for this slide is to iterate the fact that video is on a huge growth\n The last quote is an interesting one - what share of their traffic do you think this was???\n Wouldn&#x2019;t you like to get hold of their Google analytics report!\n\n
- I want to point out - this is a lazy exercise based on a MacBook pro! Because I ran out of time!\n3.02 minute film - so pretty average (Tab 1)\n(Interesting how Chrome uses Workers for extra processing)\nSo we can see a small increase in CPU usage for the HTML5 version.\nBut overall a nominal change. So all good.\nThe Flash Plugin in itself is using a large chunk of CPU\nI&#x2019;m assuming that YouTube is delivering well optimised video content and for Stage Video - Flash Player 10.1+...\n
- WOW! look at Firefox&#x2019;s overall CPU usage. Ha. Watch out here comes Firefox...\nSimilar CPU usage for the Flash plugin\nHowever, the CPU doubles for HTML5 video - this is probably due to it not using the h.264 codec and therefore no GPU acceleration \n
- Again, similar CPU usage for the Flash plugin\nHowever, the CPU stays pretty low overall\nSo we can see a good performance from the browsers as the GPU is doing the brunt of the work\nObviously, this is going to get better as the Browsers evolve\n
- But to confirm this statement still holds true\n
- So the video tag in it&#x2019;s basic form\n I don&#x2019;t want to get too much into code (unless i have time)\n You can see it&#x2019;s a simple tag\n We can implement a degrading fallback solution inside the tag\n Let&#x2019;s see an example video (open chrome - or http://skillswap.local.com/player-plain.html)\n
- This was the first example of how we can work through various formats until we can deliver the correct solution\n This method suggests we offer a simple link to the raw video as a last resort\n At Coull we would never do this - rather fall over gracefully with a fallback image and link\n
- Many options now available\n Always worth keeping an eye on HML5 please website. The team are constantly keeping the site up to date.\n popcorn, SublimeVideo, video.js, JW Player and Projekktor are all good options for one stop solution. (Open Tab 4)\n At Coull we are currently using the video.js solution (show example of the video.js player Tab 3)\n\n
- So it&#x2019;s as easy as appending the html5=1 parameter to the iFrame GET string\n Let&#x2019;s take a look at an example (Tab 4)\n\n
- So 1st issue is creating the content - demo Miro quickly\n Then make sure you serve the correct content from your server - main gotcha\n Sadly you can&#x2019;t use the Adobe Media Encoder ;-)\n
- Not going too deep into this - as it&#x2019;s a talk in itself!\n Chrome and Safari are the worst at this\n Open up Opera tab 1 for an example\n Watch the video\n
- Open tab 6\n
- Made a Node example but i think it&#x2019;s \n\n
- simples\n
- cheers guys\n
- \n