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.

1. Sarah
Allen
@ultrasaurus
Sarah
Allen
@ultrasaurus
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>

3. <video
src="coolstuff.m4v">
</video>

4. Sarah
Allen
@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 support
our hypothesis?

6. <video>
file
formats
the
dramatic
impact
of
mobile
web
video!
video.js
fun
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
=
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>

17. Web
Video
Timeline

18. Web
Video
Timeline

19. needs server
content-type
http://bit.ly/web-video-formats

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

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
impact
real
world
stories
2010
2012

25. 2010

26. Web
Video
Timeline
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%

33. Web
Video
Timeline

34. Web
Video
Timeline
2012

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

43. Web
RTC
http://webrtc-examples.herokuapp.com/

44. Web
RTC
http://webrtc-examples.herokuapp.com/

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