Mobile meow - bringing videos to a mobile world
-
Upload
greg-schechter -
Category
Technology
-
view
1.117 -
download
2
description
Transcript of Mobile meow - bringing videos to a mobile world
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 1/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 2/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Mobile Meow: Bringing Videos to
a Mobile WorldGreg Schechter - Web Warrior, Facebook
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 3/75
Greg SchechterThe Web Warrior
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 3/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 4/75
http://www.w3.org/html/logo/
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 5/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Graphics Connectivity CSS3 Styling Device Access
Multimedia Offline and
Storage Performance
and Integration Semantics
5/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 6/75
Multimedia
http://www.flickr.com/photos/dannykboyd/5048495262/
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 7/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
video
7/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 8/75
<video> expectations
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Open source technology
Lower latency
Better performance and fidelity
Accessibility
Power Consumption*
·
Browser / Player / Codec-
·
No plug-in instantiation-
·
·
·
8/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 9/75
HTML5 Video Capable Browsers
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Chrome
Firefox
Safari Opera
IE
9/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 10/75
Flash Support vs. HTML5 Support
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 11/75
YouTube Data API Usage for Flash vs. HTML5Devices
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 12/75
Let's talk mobile
http://www.flickr.com/photos/indi/2579412663/
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 13/75
Why is Mobile Important
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 13/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 14/75
Playback Stats
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Mobile
Desktop
2010 2011 20120
1,500
3,000
4,500
6,000
Year
Pla
yba
ck in
Mill
ion
s
14/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 15/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 15/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 16/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 16/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 17/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 17/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 18/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 18/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 19/75
Native
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
For fallbacks, use rtsp:// protocol (serving .3gp) if the device won't supportHTML5
Use custom protocol / URL scheme to launch the native app (on Android / BB:vnd.youtube:video_id)
iOS special-cases the YouTube Flash embed code
·
·
·
19/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 20/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 20/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 21/75
The Different Browsers
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 21/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 22/75
The Different Browsers
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 22/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 23/75
The Different Browsers
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 23/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 24/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
http://www.flickr.com/photos/brownpau/533267369/
24/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 25/75
How do we start?
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video>
25/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 26/75
The Source
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video src="funny_cat_video">
26/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 27/75
The Source
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video src="funny_cat_video.webm/mp4/ogg">
27/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 28/75
Mobile Formats Support
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Chrome Safari Firefox Opera IE Android
H264 Android 4.1+
WebM Android 4+ Android 4+ Android 4+
HLS Android 3+
28/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 29/75
Platform Versions and Distribution
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 29/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 30/75
The Source
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video>
<source src="funny_cat_video.mp4">
<source src="funny_cat_video.webm">
</video>
HTML
30/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 31/75
Power
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 32/75
Playback Stats
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Software
Hardware
700 800 900 1,000 1,100
idle
webm
h264
flash
Mean current draw (milliamps)
Research done by Yossi Oren For more information visit http://iss.oy.ne.ro/
32/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 33/75
Stick it in the page
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 34/75
Let's add a poster attribute and some clickhandlers
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 35/75
Video Poster
Very different behavior in different browsers
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Stretch poster image to <video> element size, or fit proportionally
May replace poster image with a paused frame from the video
May overlay a play icon that is different for each platform
·
·
·
35/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 36/75
Video Poster Pro Tips
Protips for a consistent look:
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Render your own cued state: <img> for the poster, play icon
Replace with the <video> when it's time to play
Set the background color to black for continuity across platforms
·
·
·
36/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 37/75
How do videos play back?
1. Inline in the page
2. Always fullscreen, no matter what
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
iPad
Android 4.0 and up
Chrome
·
·
·
iPhone, iPod
Android 2.2 - 3.0
Windows Phone
·
·
·
37/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 38/75
Fullscreen-only <video>
Video element can be stuck anywhere on the page
On webkit, good interaction with your webapp
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
1x1 pixels, or offscreen
but: has to be in the DOM, can't be visibility:hidden or display:none
just call play() to go fullscreen
iPhone: zoom-in animation from <video>'s position
·
·
·
·
Video events still fire: timeupdate, ended etc.
Free to change web page in the background
webkitbeginfullscreen, webkitendfullscreen events
·
·
·
38/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 39/75
Fullscreen-only <video> caveats
Native controls only
No overlays or custom UI
Can't do captions etc.
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 39/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 40/75
Controls
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video controls>
40/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 41/75
Controls
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 42/75
Native Controls Support
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Chrome Safari Firefox Opera IE Android
Play/pauseButton
VolumeControls Only in Fullscreen
Mute toggleonly
Don't work inAndroid 4
Seek bar
Fullscreen Button Button and gesture Button
Playback Type Both Fullscreen only onphones
Inline only Determined byhardware
Fullscreenonly
Both
42/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 43/75
Custom Controls
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Preserve your brand
Unified experience across platforms and browsers
·
·
43/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 44/75
Custom Controls
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 45/75
Custom Controls
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Preserve your brand
Unified experience across platforms and browsers
·
·
Allows us to expand the set of controls and add our own·
Annotations
Playlist
Captions
More
-
-
-
-
45/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 46/75
Custom Controls Pro Tips
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
User expect to be able to drag the progress bar
Volume can't be set everywhere and users are accustomed to using devicecontrols
Fingers are fat
Don't trigger content with hover
Fullscreen
·
Need to remender to prevent scroll on touchstart-
·
So don't build controls for it-
·
Average finger is 11mm so make targets at least 40px with 10px padding
Use SVG's so icons can be scaled and shared with desktop application
-
-
·
·
The browsing context is always fullscreen so fake it-
46/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 47/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Fullscreen
47/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 48/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
requestFullscreen
48/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 49/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
What about Mobile?
49/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 50/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Isn't it already fullscreen?
50/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 51/75
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Yes (sort of)
51/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 52/75
Mobile Fullscreen
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Open New Tab
Remember size context changes so use viewport to scale icons and controls
webkitEnterFullscreen
·
·
@viewport { width: device-width; }-
·
Webkit only
Just the video element
Native controls only
metadata must be loaded
Only in click event
-
-
-
-
-
52/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 53/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video autoplay>
53/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 54/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 54/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 55/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Doesn't work! Restriction: need user action.
Why?
Where?
·
·
On a cell network - users charged for data
Slow downloads, let the user decide
-
-
·
Safari on iOS (iPad included, even on WIFI)
Android Browser (4.0+)
Chrome on Android
-
-
-
55/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 56/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
What about everyone else?
56/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 57/75
Autoplay Support
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Chrome Safari Firefox Opera IE Android
Attribute
Scripted Buggy, going away
57/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 58/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 58/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 59/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<video onclick="this.play()">
59/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 60/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 60/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 61/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 61/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 62/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<script>
function someClickEvent(evt) {
// In a user initiated thread.
myVideoElement.load(); // Magic incantation to enable play() later on!
getVideoData(); // Triggers an ajax call.
}
function onGetVideoDataReturned(data) {
// Not in a user initiated thread.
setVideoElementSrc(data);
myVideoElement.load();
myVideoElement.play();
}
</script>
JAVASCRIPT
62/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 63/75
Autoplay
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<script>
function someClickEvent(evt) {
// In a user initiated thread.
myVideoElement.load(); // Magic incantation to enable play() later on!
getVideoData(); // Triggers an ajax call.
}
function onGetVideoDataReturned(data) {
// Not in a user initiated thread.
setVideoElementSrc(data);
myVideoElement.load();
// For Android
window.setTimeout(function() {
myVideoElement.play();
}, 0);
}
</script>
JAVASCRIPT
63/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 64/75
Embeds in an HTML5 world
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/ 64/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 65/75
Embeds
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<script>
<object>
<iframe>
·
We need our content to be sandboxed
More than just a video tag
-
-
·
Can load content with the data attribute
But no way to interact with it via JavaScript
-
-
·
Allows our content to be sandboxed
JavaScript API communication
-
-
65/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 66/75
Embeds
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<iframe type="text/html"
width="640"
height="385"
frameborder="0"
src="http://www.youtube.com/embed/VIDEO_ID"
allowfullscreen>
</iframe>
HTML
Plan for the future (if you can)·
66/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 67/75
Iframe Pro Tips
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
html {
/** Hack to fix iPhone resizing. */
overflow: hidden;
}
CSS
body {
/** Dymanic Resizing **/
background-color: #000;
height: 100%;
width: 100%;
/** Remove highlight when use clicks **/
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
CSS
67/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 68/75
Offline and Storage
http://www.flickr.com/photos/dannykboyd/5048495262/
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 69/75
Appcache
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
Offline mode for a video streaming site - useless?
More that just offline access: saves on latency every visit
Pay for code size twice: download + parse time
Saves the download time
·
·
·
·
69/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 70/75
Appcache
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
<html manifest="manifest_url">
<script src="script.js" />
<link rel="stylesheet" href="style.css" />
</html>
HTML
CACHE MANIFEST
CACHE:
script.js
style.css
NETWORK:
file_to_always_load.jpg
HTML
70/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 71/75
Appcache - How to force an update?
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
CACHE MANIFEST
CACHE:
foo.js
# Build date: 20120628
HTML
// Random AJAX response
{ "data": ...,
"buildDate": 20120628 }
JAVASCRIPT
var scriptBuildDate = 20120621; // Auto-generated during build or push
if (someResponse.buildDate > scriptBuildDate) {
window.applicationCache.update();
}
JAVASCRIPT
71/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 72/75
Appcache gotchas
#mov06 http://creativecommons.org/licenses/by-nc-sa/3.0/
GET parameters on cached resources bypass the cache
Strict implementations (eg. iOS5) refuse to download files not in the manifest
since YouTube streams from many domains, we just put
·
·
·
NETWORK: *
Can get wrong in a scary way
Users stuck on old code
Create multiple copies of the entire site in the cache
·
·
·
Easy to break master URL
some redirects to an appcached site: 303 or history.replaceState
history.pushState before background download completes
Some implementations are buggy
·
·
·
·
72/75
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 73/75
<Thank You!>
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 74/75
can haz question?
http://www.flickr.com/photos/cloudzilla/378829651/
3/30/13 Mobile Meow: Bringing Videos to a Mobile World
gregthebusker.com/html5/mobile_meow_codemotion.html#1 75/75