Mobile Web Video
1 like2,119 views
The document discusses the evolution of web video and its increasing impact on mobile from 2010 to 2012. Key developments include the rise of smartphones, video formats supported in different browsers, tools for format conversion, and libraries like Video.js that provide consistent video playback across devices. WebRTC was also introduced, allowing real-time video chat in browsers. Overall mobile traffic and use of mobile video grew dramatically in this period.
Mobile Web Video
- 2. <object id="UNIQUEID" height="520" width="528" codebase="http:// download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=9 classid="clsid:d27cdb6e-‐ ae6d-‐11cf-‐96b8-‐444553540000" > <param value="../player/myVideoPlayer.swf" name="movie" /> <param value="true" name="allowFullScreen" /> <param value="all" name="allowNetworking" /> <param value="always" name="allowScriptAccess" /> <param value="opaque" name="wmode" /> <param value="myVideoFile.flv" name="FlashVars" /> <embed height="520" width="528" src="../player/mds_player.swf" id="UNIQUEID" wmode="opaque" allowscriptaccess="always" allownetworking="all" allowfullscreen="true" swf="../player/myVideoPlayer.swf" flashvars="myVideoFile.flv" pluginspage="http://www.macromedia.com/go/ getflashplayer" type="application/x-‐shockwave-‐flash" quality="high" /> </object>
- 5. Learn: what do we know? (numbers are good) Hypothesis: what do we believe? (numbers are good) Test: how can we check reality? Analyze: does the data support our hypothesis?
- 6. <video> file formats the dramatic impact of mobile web video! video.js fun new stuff
- 7. <video>
- 9. <video src="coolstuff.m4v" controls> </video>
- 10. <video src="coolstuff.m4v" controls preload= "metadata" > </video> metadata = default only really works if metadata is at start of file
- 11. <video src="coolstuff.m4v" controls preload= "none" > </video>
- 12. <video src="coolstuff.m4v" controls preload= "auto" > </video>
- 13. <video src="coolstuff.m4v" controls autoplay> </video>
- 14. <video src="coolstuff.m4v" controls autoplay loop> </video>
- 15. <video src="coolstuff.m4v" controls autoplay loop muted> </video>
- 16. <video src="coolstuff.m4v" controls poster= "coolstuff.jpg" > </video>
- 20. ffmpeg -i pool.mov -codec:v libtheora -qscale:v 3 -codec:a libvorbis -qscale:a 3 pool.ogv ffmpeg -i pool.mov -vcodec libvpx -acodec libvorbis pool.webm ffmpeg OSX: brew install ffmpeg won’t work Compile Instructions: http://bit.ly/ffmpeg-ogg-webm
- 22. <video> <source src="coolstuff.mp4" type= "video/mp4"> <source src="coolstuff.ogg" type= "video/ogg"> <source src="coolstuff.webm" type= "video/webm"> Your browser does not support this video. </video>
- 23. <video> <source src="coolstuff-‐small.mp4" type= "video/mp4" media="all and (max-‐width:480px)"> <source src="coolstuff-‐large.mp4" type= "video/mp4"> </video>
- 24. dramatic impact real world stories 2010 2012
- 25. 2010
- 27. iPhone, Android, BlackBerry, Windows Mobile
- 28. 2012
- 29. Learn: what do we know? (numbers are good) Hypothesis: what do we believe? (numbers are good) Test: how can we check reality? Analyze: does the data support our hypothesis?
- 31. hypothesis people want language resources on mobile
- 32. Mobile Traffic Android (78) 18.4% Blackberry (10) 2.5% Nokia (2) 0.2% Opera (1) 0.1% Unknown 6.2% 73% iOS iPhone 53.2% iPad 16% iPod 2.8% iPod Touch 0.7%
- 35. 30% of desktop traffic from browsers that don’t support <video> with mp4
- 36. 99% of our traffic from desktop browsers that support <video> with mp4 or Flash Firefox IE <9 Opera }these browsers support Flash
- 37. Flash to <video> for iOS
- 38. video.js http://www.videojs.com/ <link href="http://vjs.zencdn.net/c/video-‐js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> <video id="video_player" class="video-‐js vjs-‐default-‐skin" controls preload="auto" width="440" height="380" style="overflow:hidden;" data-‐setup="{}"> <source src="http://www..../79096138-‐4b35-‐470f-‐92bc.mp4' type='video/mp4'> </video>
- 39. same code for Flash http://www.videojs.com/ <link href="http://vjs.zencdn.net/c/video-‐js.css" rel="stylesheet"> <script src="http://vjs.zencdn.net/c/video.js"></script> <video id="video_player" class="video-‐js vjs-‐default-‐skin" controls preload="auto" width="440" height="380" style="overflow:hidden;" data-‐setup="{}"> <source src="http://www..../79096138-‐4b35-‐470f-‐92bc.mp4' type='video/mp4'> </video>
- 40. Returning Visits on Mobile increased by 34%
- 41. Mobile video increased search traffic > 2x
- 42. fun stuff
- 45. webrtc.org including Android! including Android! Firefox OS coming... follow bug 750011
- 46. <input type= "file" > mobile Safari -‐-‐ iOS 6
- 47. dank je wel Sarah Allen @ultrasaurus