Your SlideShare is downloading. ×
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Mobile Web Video
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mobile Web Video

834

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.

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
834
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Sarah  Allen@ultrasaurusSarah  Allen@ultrasaurusMobile  WebVideo
  • 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. <video  src="coolstuff.m4v"></video>
  • 4. SarahAllen@ultrasaurus
  • 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. <video>file  formatsthe  dramatic  impactof  mobile  web  video!video.jsfun  new  stuff
  • 7. <video>
  • 8. <video  src="coolstuff.m4v">  </video>
  • 9. <video  src="coolstuff.m4v"  controls>  </video>
  • 10. <video  src="coolstuff.m4v"  controls     preload=  "metadata"  >  </video>metadata  =  defaultonly  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>
  • 17. Web  Video  Timeline
  • 18. Web  Video  Timeline
  • 19. needs servercontent-typehttp://bit.ly/web-video-formats
  • 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. http://www.squared5.com/svideo/mpeg-streamclip-mac.html
  • 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  impactreal  world  stories20102012
  • 25. 2010
  • 26. Web  Video  Timeline2010
  • 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 supportour hypothesis?
  • 30. hypothesis  people  want  language  resources  on  mobile
  • 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. Web  Video  Timeline
  • 33. Web  Video  Timeline2012
  • 34. 30% of desktop trafficfrom browsers that don’t support<video> with mp4
  • 35. 99% of our traffic fromdesktop browsers that support<video> with mp4 or FlashFirefoxIE <9Opera}these browserssupport Flash
  • 36. Flash  to  <video>for  iOS
  • 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. 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. Returning  Visits  on  Mobile  increased  by  34%
  • 40. Mobile  video  increased  search  traffic  >  2x
  • 41. fun  stuff
  • 42. Web  RTChttp://webrtc-examples.herokuapp.com/
  • 43. Web  RTChttp://webrtc-examples.herokuapp.com/
  • 44. webrtc.orgincluding Android!including Android!Firefox OS coming...follow bug 750011
  • 45. <input  type=  "file"  >mobile  Safari  -­‐-­‐  iOS  6
  • 46. dank  je  welSarah  Allen@ultrasaurus

×