Sarah	  Allen@ultrasaurusSarah	  Allen@ultrasaurusMobile	  WebVideo
<object	  id="UNIQUEID"	  height="520"	  width="528"	  codebase="http://	  download.macromedia.com/pub/shockwave/cabs/flash...
<video	  src="coolstuff.m4v"></video>
SarahAllen@ultrasaurus
Learn: what do we know?(numbers are good)Hypothesis: what do we believe?(numbers are good)Test: how can we check reality?A...
<video>file	  formatsthe	  dramatic	  impactof	  mobile	  web	  video!video.jsfun	  new	  stuff
<video>
<video	  src="coolstuff.m4v">	  </video>
<video	  src="coolstuff.m4v"	  controls>	  </video>
<video	  src="coolstuff.m4v"	  controls	  	   preload=	  "metadata"	  >	  </video>metadata	  =	  defaultonly	  really	  wor...
<video	  src="coolstuff.m4v"	  controls	  	   preload=	  "none"	  >	  </video>
<video	  src="coolstuff.m4v"	  controls	  	   preload=	  "auto"	  >	  </video>
<video	  src="coolstuff.m4v"	  controls	  	   autoplay>	  </video>
<video	  src="coolstuff.m4v"	  controls	  	   autoplay	  loop>	  </video>
<video	  src="coolstuff.m4v"	  controls	  	   autoplay	  loop	  muted>	  </video>
<video	  src="coolstuff.m4v"	  controls	  	  	   poster=	  "coolstuff.jpg"	  >	  </video>
Web	  Video	  Timeline
Web	  Video	  Timeline
needs servercontent-typehttp://bit.ly/web-video-formats
ffmpeg -i pool.mov-codec:v libtheora -qscale:v 3-codec:a libvorbis -qscale:a 3 pool.ogvffmpeg -i pool.mov-vcodec libvpx -a...
http://www.squared5.com/svideo/mpeg-streamclip-mac.html
<video>	   <source	  src="coolstuff.mp4"	  type=	  "video/mp4">	   <source	  src="coolstuff.ogg"	  type=	  "video/ogg">	   <...
<video>	   <source	  src="coolstuff-­‐small.mp4"	  	  	  	  	  	  	  	  	  	  	  	  	  	  	  type=	  "video/mp4"	  	  	  	 ...
dramatic	  impactreal	  world	  stories20102012
2010
Web	  Video	  Timeline2010
iPhone,	  Android,	  BlackBerry,	  Windows	  Mobile
2012
Learn: what do we know?(numbers are good)Hypothesis: what do we believe?(numbers are good)Test: how can we check reality?A...
hypothesis	  people	  want	  language	  resources	  on	  mobile
Mobile	  TrafficAndroid (78) 18.4%Blackberry (10) 2.5%Nokia (2) 0.2%Opera (1) 0.1%Unknown 6.2%73% iOSiPhone 53.2%iPad 16%iPo...
Web	  Video	  Timeline
Web	  Video	  Timeline2012
30% of desktop trafficfrom browsers that don’t support<video> with mp4
99% of our traffic fromdesktop browsers that support<video> with mp4 or FlashFirefoxIE <9Opera}these browserssupport Flash
Flash	  to	  <video>for	  iOS
video.jshttp://www.videojs.com/<link	  href="http://vjs.zencdn.net/c/video-­‐js.css"	  rel="stylesheet"><script	  src="htt...
same	  code	  for	  Flashhttp://www.videojs.com/<link	  href="http://vjs.zencdn.net/c/video-­‐js.css"	  rel="stylesheet"><...
Returning	  Visits	  on	  Mobile	  increased	  by	  34%
Mobile	  video	  increased	  search	  traffic	  >	  2x
fun	  stuff
Web	  RTChttp://webrtc-examples.herokuapp.com/
Web	  RTChttp://webrtc-examples.herokuapp.com/
webrtc.orgincluding Android!including Android!Firefox OS coming...follow bug 750011
<input	  type=	  "file"	  >mobile	  Safari	  -­‐-­‐	  iOS	  6
dank	  je	  welSarah	  Allen@ultrasaurus
Mobile Web Video
Upcoming SlideShare
Loading in...5
×

Mobile Web Video

1,009

Published on

An overview of video for the mobile web with a "lean startup" case study about how supporting web video on mobile had both expected and unexpected positive effects on Mightyverse metrics.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,009
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Mobile Web Video

  1. 1. Sarah  Allen@ultrasaurusSarah  Allen@ultrasaurusMobile  WebVideo
  2. 2. <object  id="UNIQUEID"  height="520"  width="528"  codebase="http://  download.macromedia.com/pub/shockwave/cabs/flash/  swflash.cab#version=9classid="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>
  3. 3. <video  src="coolstuff.m4v"></video>
  4. 4. SarahAllen@ultrasaurus
  5. 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 supportour hypothesis?
  6. 6. <video>file  formatsthe  dramatic  impactof  mobile  web  video!video.jsfun  new  stuff
  7. 7. <video>
  8. 8. <video  src="coolstuff.m4v">  </video>
  9. 9. <video  src="coolstuff.m4v"  controls>  </video>
  10. 10. <video  src="coolstuff.m4v"  controls     preload=  "metadata"  >  </video>metadata  =  defaultonly  really  works  if  metadata  is  at  start  of  file
  11. 11. <video  src="coolstuff.m4v"  controls     preload=  "none"  >  </video>
  12. 12. <video  src="coolstuff.m4v"  controls     preload=  "auto"  >  </video>
  13. 13. <video  src="coolstuff.m4v"  controls     autoplay>  </video>
  14. 14. <video  src="coolstuff.m4v"  controls     autoplay  loop>  </video>
  15. 15. <video  src="coolstuff.m4v"  controls     autoplay  loop  muted>  </video>
  16. 16. <video  src="coolstuff.m4v"  controls       poster=  "coolstuff.jpg"  >  </video>
  17. 17. Web  Video  Timeline
  18. 18. Web  Video  Timeline
  19. 19. needs servercontent-typehttp://bit.ly/web-video-formats
  20. 20. ffmpeg -i pool.mov-codec:v libtheora -qscale:v 3-codec:a libvorbis -qscale:a 3 pool.ogvffmpeg -i pool.mov-vcodec libvpx -acodec libvorbispool.webmffmpegOSX: brew install ffmpeg won’t workCompile Instructions: http://bit.ly/ffmpeg-ogg-webm
  21. 21. http://www.squared5.com/svideo/mpeg-streamclip-mac.html
  22. 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. 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. 24. dramatic  impactreal  world  stories20102012
  25. 25. 2010
  26. 26. Web  Video  Timeline2010
  27. 27. iPhone,  Android,  BlackBerry,  Windows  Mobile
  28. 28. 2012
  29. 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 supportour hypothesis?
  30. 30. hypothesis  people  want  language  resources  on  mobile
  31. 31. Mobile  TrafficAndroid (78) 18.4%Blackberry (10) 2.5%Nokia (2) 0.2%Opera (1) 0.1%Unknown 6.2%73% iOSiPhone 53.2%iPad 16%iPod 2.8%iPod Touch 0.7%
  32. 32. Web  Video  Timeline
  33. 33. Web  Video  Timeline2012
  34. 34. 30% of desktop trafficfrom browsers that don’t support<video> with mp4
  35. 35. 99% of our traffic fromdesktop browsers that support<video> with mp4 or FlashFirefoxIE <9Opera}these browserssupport Flash
  36. 36. Flash  to  <video>for  iOS
  37. 37. video.jshttp://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>
  38. 38. same  code  for  Flashhttp://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. 39. Returning  Visits  on  Mobile  increased  by  34%
  40. 40. Mobile  video  increased  search  traffic  >  2x
  41. 41. fun  stuff
  42. 42. Web  RTChttp://webrtc-examples.herokuapp.com/
  43. 43. Web  RTChttp://webrtc-examples.herokuapp.com/
  44. 44. webrtc.orgincluding Android!including Android!Firefox OS coming...follow bug 750011
  45. 45. <input  type=  "file"  >mobile  Safari  -­‐-­‐  iOS  6
  46. 46. dank  je  welSarah  Allen@ultrasaurus

×