0
Mobile Meow      Bring YouTube to the Mobile WebBy YouTubes Greg Schechter and Eugene Goldin
Greg Schechter           Eugene GoldinThe Web Warrior          Code Crusaderschechter@google.com   eugenegoldin@google.com
Video
Video
A Brief History
Video
Flash
<video>
Video
Playback Stats
Flash   Native   <video>
FlashFlash         ==   Flash
Flash   Flash
Native
Native ○   For fallbacks, use rtsp:// protocol (serving .3pg) if the     device wont support HTML5 ○   Use custom protocol...
<video>
The Different Browsers        Safari           Android
The Different Browsers                             OperaSafari    Android   Chrome                Silk                    ...
The Different Browsers                             OperaSafari    Android   Chrome                Silk                    ...
By brownpau at http://www.flickr.com/photos/brownpau/533267369/
How do we start              <video>
The Source     <video src="funny_cat_video">
The Source<video src="funny_cat_video.webm/mp4/ogg">
Mobile Formats Support        Chrome       Safari           Firefox   Opera        IE   AndroidH.264WebM    Android 4+    ...
The Source   <video>    <source src="funny_cat_video.mp4">    <source src="funny_cat_video.webm">   </video>
Power
Power Consumption: H264 vs WebM                                                                              **fullscreen ...
Stick it in a page
Basic video tagSafari   ○   Renders a thumbnail poster and play button (flaky)   ○   Background is set to black and cannot...
Give it a poster and click it
Poster AttributeUse the poster attribute to get a thumbnailSafari, Chrome, Android, and Opera   ○ Preserve aspect ratio of...
Basic video tagChrome   ○ Default click to toggle play/pause   ○ Remove with an empty onclick handlerSafari   ○     Will l...
Basic video tagPro tips:   ○   Create your own cued state to convey you can play the video   ○   Set the background color ...
Controls           <video controls>
Controls             Chrome   Safari       Firefox       Opera           IE           AndroidPlay/pauseButtonVolume       ...
Custom Controls● Preserve your brand● Unified experience across platforms and  browsers
Custom Controls  Lets get some custom controls
Custom Controls● Allows us to expand the set of controls and add our own  ○ annotations  ○ playlist  ○ captions  ○ more
Custom Controls Pro Tips● User expect to be able to drag the progress  bar  ○ Need to remender to prevent scroll on touchs...
Custom Controls Pro Tips●   Fingers are fat    ○ Average finger is 11mm so make targets at least        40px with 10px pad...
Custom Controls Pro Tips●   Dont trigger content with hover●   Fullscreen    ○ The browsing context is always fullscreen s...
Fullscreen
requestFullScreen
requestFullScreen● Desktop Only  ○ Firefox, Safari, and Chrome  ○ Vendor Prefixed
What about Mobile?
Isnt it already fullscreen?
Yes (sort of)
Mobile Fullscreen●   Open New Tab●   webkitEnterFullscreen      ■ Webkit only      ■ Video element only      ■ metadata mu...
Mobile Fullscreen●   Open New Tab●   webkitEnterFullscreen      ■ Webkit only      ■ Video element only      ■ metadata mu...
@viewport { width: device-width; }
autoplay           <video autoplay>
autoplayIn Safari on iOS (for all devices, including iPad),where the user may be on a cellular network andbe charged per d...
What about everyone else?
Autoplay            Chrome   Safari   Firefox   Opera   IE   AndroidAttributeScripted                                     ...
autoplay
autoplay       <video onclick="this.play()">
autoplayfunction someClickEvent(evt) {  // In a user initiated thread.  myVideoElement.load();  getVideoData(); // Trigger...
autoplayfunction someClickEvent(evt) {  // In a user initiated thread.  myVideoElement.load();  getVideoData(); // Trigger...
Embeds
Embeds <script>
Embeds <script>   ○ We need our content to be sandboxed   ○ More than just a video tag
Embeds <script>   ○ We need our content to be sandboxed   ○ More than just a video tag <object>
Embeds <script>   ○ We need our content to be sandboxed   ○ More than just a video tag <object>   ○ Can load content with ...
Embeds <iframe>
Embeds <iframe>    ○ Allows our content to be sandboxed    ○ JavaScript API communication
Embeds<iframe type="text/html"  width="640"  height="385"  frameborder="0"  src="http://www.youtube.com/embed/VIDEO_ID"  a...
EmbedsPro tip: Plan for the future (if you can)<iframe type="text/html"  width="640"  height="385"  frameborder="0"  src="...
Embeds Pro Tips:html {  /** Hack to fix iPhone resizing. */  overflow: hidden;}
Embeds Pro Tips:body {  /** Dymanic Resizing **/  background-color: #000;  height: 100%;  width: 100%;  /** Remove highlig...
Testing
Testing: The Old Fashioned Way ●   Device lab      ○ accurate      ○ costly      ○ space inefficient      ○ boring
Testing: With Software ● Hardware Emulators / Simulators    ○ available for major systems    ○ approximation varies    ○ s...
Testing: With Software ● Browser Simulators   ○ Poorer approximation ● Opera Mobile Simulator   ○ missing video tag suppor...
Testing: Automation ● Selenium!   ○ use with simulated or real devices   ○ not boring
Testing: Automation ● Android Webdriver    ○ Still no video support ● iOS Webdriver    ○ Need to register as ios dev    ○ ...
Testing: Automation ● Chrome, Opera   ○ Driver APIs built-in   ○ Remote debugging ● FFMobile   ○ No webdriver APIs
Testing: Automation Strategy ● Test API methods in mobile context first   ○ cheap   ○ can approximate video playback by vi...
Testing: Automation Strategy ● More sophisticated tests to follow   ○ screenreader ● Screen cap processing   ○ check for d...
Testing: Automation Strategy ● Screen cap processing
Testing: Hardware Assistance   for more information check out http://bitbeam.org/
The Future Cats in Space by WF&TD
Or
PointerEventshttp://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx
http://imgs.xkcd.com/comics/in_ur_reality.png
Track<video> <track src="cats_meow" kind="subtitles"></video>
Camera Access with  getUserMedia
More to learn ● HTML5 Video Spec   ○ http://dev.w3.org/html5/spec-author-view/video.html ● Browser Blogs   ○ http://dev.op...
Questions?     can haz question?            By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/schechter@goog...
Mobile Meow at Mobilism
Mobile Meow at Mobilism
Mobile Meow at Mobilism
Mobile Meow at Mobilism
Mobile Meow at Mobilism
Mobile Meow at Mobilism
Upcoming SlideShare
Loading in...5
×

Mobile Meow at Mobilism

2,909

Published on

Greg Schechter & Eugene Goldin — Mobile Meow: Bringing YouTube Videos to a Mobile World

This is the story of the glory and struggle of bringing a high quality YouTube experience to the mobile web. Once upon a time there was a web developer who wanted to play videos on the web. So he filmed a cat and wrote a Flash and a HTML5 player. He spent many hours making it work on his favorite desktop browsers and even the one his grandfather still used. People could watch his cat video, he smiled, and the world was good. Then one day someone put a browser in a phone and soon there were many phones with many different browsers. This new set of environments were even harder to develop for and had a slew of new terrifying bugs. The web developer was miserable knowing people couldn’t watch his cat video. With much time and effort he figured out many of the secrets needed to combat the evils of the different mobile platforms. Once again people could watch his cat vid eo, he smiled, and the world was good. The end.


Greg is a fearless web warrior, fighting for browser and website progress. While training at the University of Illinois in Urbana-Champaign, he published articles with the Opera Web Standards Curriculum. Subsequently, he went on to battle alongside many different web companies, including Amazon, Yahoo, and Google. His current alliance is with YouTube, where he spearheads the movement for HTML5 video capabilities.


Eugene Goldin is a javascript developer at YouTube. His interests include taking web videos where no video could go before, improving how users interact with web technologies, and long walks on the beach.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,909
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Meow at Mobilism"

  1. 1. Mobile Meow Bring YouTube to the Mobile WebBy YouTubes Greg Schechter and Eugene Goldin
  2. 2. Greg Schechter Eugene GoldinThe Web Warrior Code Crusaderschechter@google.com eugenegoldin@google.com
  3. 3. Video
  4. 4. Video
  5. 5. A Brief History
  6. 6. Video
  7. 7. Flash
  8. 8. <video>
  9. 9. Video
  10. 10. Playback Stats
  11. 11. Flash Native <video>
  12. 12. FlashFlash == Flash
  13. 13. Flash Flash
  14. 14. Native
  15. 15. Native ○ For fallbacks, use rtsp:// protocol (serving .3pg) if the device wont support HTML5 ○ Use custom protocol / URL scheme to launch your own Android, iOS native app (no Windows Phone yet) ■ youtube://video_id
  16. 16. <video>
  17. 17. The Different Browsers Safari Android
  18. 18. The Different Browsers OperaSafari Android Chrome Silk Mini Firefox Opera IE
  19. 19. The Different Browsers OperaSafari Android Chrome Silk Mini Firefox Opera IE AMP LE S
  20. 20. By brownpau at http://www.flickr.com/photos/brownpau/533267369/
  21. 21. How do we start <video>
  22. 22. The Source <video src="funny_cat_video">
  23. 23. The Source<video src="funny_cat_video.webm/mp4/ogg">
  24. 24. Mobile Formats Support Chrome Safari Firefox Opera IE AndroidH.264WebM Android 4+ Android 4+ Android 4+HLS Android 3+ Platform Versions and Distribution
  25. 25. The Source <video> <source src="funny_cat_video.mp4"> <source src="funny_cat_video.webm"> </video>
  26. 26. Power
  27. 27. Power Consumption: H264 vs WebM **fullscreen flash **windowed flashResearch done by Yossi Oren For more information visit http://iss.oy.ne.ro/
  28. 28. Stick it in a page
  29. 29. Basic video tagSafari ○ Renders a thumbnail poster and play button (flaky) ○ Background is set to black and cannot be overwritten ○ If a parent element has display:none set at any point the video fails to playback properlyOpera ○ Gives video dimentions black background if the information is available ○ Has issues with stretching WebMIE and Android ○ Play button/film icon for all video tags regardless if browser can play the format ○ Background is set to black/grey and cannot be overwritten
  30. 30. Give it a poster and click it
  31. 31. Poster AttributeUse the poster attribute to get a thumbnailSafari, Chrome, Android, and Opera ○ Preserve aspect ratio of poster imageIE and Firefox ○ Stretch image to size of video tagIE ○ Keeps poster as paused stateAll Others ○ Replace video with the paused frame
  32. 32. Basic video tagChrome ○ Default click to toggle play/pause ○ Remove with an empty onclick handlerSafari ○ Will launch any supported video with or without an onclick handlerAndroid and IE ○ Shows click interactions but does not play with empty onclick
  33. 33. Basic video tagPro tips: ○ Create your own cued state to convey you can play the video ○ Set the background color to black for continuity across platforms
  34. 34. Controls <video controls>
  35. 35. Controls Chrome Safari Firefox Opera IE AndroidPlay/pauseButtonVolume Only in Mute toggle Dont work inControls Fullscreen only Android 4Seek barFullscreen Button Gesture ButtonbuttonPlayback Both Fullscreen Inline only Determined Fullscreen BothType only by hardware only
  36. 36. Custom Controls● Preserve your brand● Unified experience across platforms and browsers
  37. 37. Custom Controls Lets get some custom controls
  38. 38. Custom Controls● Allows us to expand the set of controls and add our own ○ annotations ○ playlist ○ captions ○ more
  39. 39. Custom Controls Pro Tips● User expect to be able to drag the progress bar ○ Need to remender to prevent scroll on touchstart● Volume cant be set everywhere and users are accustomed to using device controls ○ So dont build controls for it
  40. 40. Custom Controls Pro Tips● Fingers are fat ○ Average finger is 11mm so make targets at least 40px with 10px padding ○ Use SVGs so icons can be scaled and shared with desktop application ○ Do what you can in css
  41. 41. Custom Controls Pro Tips● Dont trigger content with hover● Fullscreen ○ The browsing context is always fullscreen so fake it
  42. 42. Fullscreen
  43. 43. requestFullScreen
  44. 44. requestFullScreen● Desktop Only ○ Firefox, Safari, and Chrome ○ Vendor Prefixed
  45. 45. What about Mobile?
  46. 46. Isnt it already fullscreen?
  47. 47. Yes (sort of)
  48. 48. Mobile Fullscreen● Open New Tab● webkitEnterFullscreen ■ Webkit only ■ Video element only ■ metadata must be loaded
  49. 49. Mobile Fullscreen● Open New Tab● webkitEnterFullscreen ■ Webkit only ■ Video element only ■ metadata must be loaded● Pro Tip: Remember size context changes so use viewport to scale icons and controls
  50. 50. @viewport { width: device-width; }
  51. 51. autoplay <video autoplay>
  52. 52. autoplayIn Safari on iOS (for all devices, including iPad),where the user may be on a cellular network andbe charged per data unit, preload and autoplay aredisabled. No data is loaded until the user initiates it.
  53. 53. What about everyone else?
  54. 54. Autoplay Chrome Safari Firefox Opera IE AndroidAttributeScripted Buggy
  55. 55. autoplay
  56. 56. autoplay <video onclick="this.play()">
  57. 57. autoplayfunction someClickEvent(evt) { // In a user initiated thread. myVideoElement.load(); getVideoData(); // Triggers an ajax call.}function onGetVideoDataReturned(data) { // Not in a user initiated thread. setVideoElementSrc(data); myVideoElement.load(); myVideoElement.play();}
  58. 58. autoplayfunction someClickEvent(evt) { // In a user initiated thread. myVideoElement.load(); 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);}
  59. 59. Embeds
  60. 60. Embeds <script>
  61. 61. Embeds <script> ○ We need our content to be sandboxed ○ More than just a video tag
  62. 62. Embeds <script> ○ We need our content to be sandboxed ○ More than just a video tag <object>
  63. 63. Embeds <script> ○ We need our content to be sandboxed ○ More than just a video tag <object> ○ Can load content with the data attribute ○ But no way to interact with it via JavaScript
  64. 64. Embeds <iframe>
  65. 65. Embeds <iframe> ○ Allows our content to be sandboxed ○ JavaScript API communication
  66. 66. Embeds<iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
  67. 67. EmbedsPro tip: Plan for the future (if you can)<iframe type="text/html" width="640" height="385" frameborder="0" src="http://www.youtube.com/embed/VIDEO_ID" allowfullscreen></iframe>
  68. 68. Embeds Pro Tips:html { /** Hack to fix iPhone resizing. */ overflow: hidden;}
  69. 69. Embeds Pro Tips:body { /** Dymanic Resizing **/ background-color: #000; height: 100%; width: 100%; /** Remove highlight when use clicks **/ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
  70. 70. Testing
  71. 71. Testing: The Old Fashioned Way ● Device lab ○ accurate ○ costly ○ space inefficient ○ boring
  72. 72. Testing: With Software ● Hardware Emulators / Simulators ○ available for major systems ○ approximation varies ○ still boring ● Android Emulator ○ bulky, slow, no video codecs ● iOs Simulator ○ both tablet and phone
  73. 73. Testing: With Software ● Browser Simulators ○ Poorer approximation ● Opera Mobile Simulator ○ missing video tag support ● Fennec (FF) Simulator ○ poor touch control mapping ○ sends desktop user agent
  74. 74. Testing: Automation ● Selenium! ○ use with simulated or real devices ○ not boring
  75. 75. Testing: Automation ● Android Webdriver ○ Still no video support ● iOS Webdriver ○ Need to register as ios dev ○ Intermittent issues with playback ● IE ○ No webdriver APIs for mobile
  76. 76. Testing: Automation ● Chrome, Opera ○ Driver APIs built-in ○ Remote debugging ● FFMobile ○ No webdriver APIs
  77. 77. Testing: Automation Strategy ● Test API methods in mobile context first ○ cheap ○ can approximate video playback by video. currentTime
  78. 78. Testing: Automation Strategy ● More sophisticated tests to follow ○ screenreader ● Screen cap processing ○ check for distortion ○ playback accuracy
  79. 79. Testing: Automation Strategy ● Screen cap processing
  80. 80. Testing: Hardware Assistance for more information check out http://bitbeam.org/
  81. 81. The Future Cats in Space by WF&TD
  82. 82. Or
  83. 83. PointerEventshttp://msdn.microsoft.com/en-us/library/ie/hh673557(v=vs.85).aspx
  84. 84. http://imgs.xkcd.com/comics/in_ur_reality.png
  85. 85. Track<video> <track src="cats_meow" kind="subtitles"></video>
  86. 86. Camera Access with getUserMedia
  87. 87. More to learn ● HTML5 Video Spec ○ http://dev.w3.org/html5/spec-author-view/video.html ● Browser Blogs ○ http://dev.opera.com/ ○ http://hacks.mozilla.org/ ○ http://blogs.msdn.com/b/ie/ ○ http://peter.sh/ ● Documentation ○ https://developer.mozilla.org/en-US/ ● Other ○ http://developer.apple. com/library/safari/#documentation/AudioVideo/Conceptual/Using_HT ML5_Audio_Video/Device-SpecificConsiderations/Device- SpecificConsiderations.html
  88. 88. Questions? can haz question? By cloudzilla http://www.flickr.com/photos/cloudzilla/378829651/schechter@google.comeugenegoldin@google.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×