Demo
Project Background           •           •     Combinator           • HTML5 Video Encoding           INPUT FROM           ...
VideoJS - 3 Pieces       •HTML Embed Code         (Video for Everybody)       •Javascript Library (video.js)       •CSS Sk...
Embed Code         Video for Everybody             By Kroc Camen
Embed Code   <video width="640" height="360" controls>        <source src="__VIDEO__.MP4" type="video/mp4" />        <sour...
Embed Code   <video width="640" height="360" controls>        <source src="__VIDEO__.MP4" type="video/mp4" />        <sour...
Embed Code   <video width="640" height="360" controls>        <source src="__VIDEO__.MP4" type="video/mp4" />        <sour...
Embed Code   <video width="640" height="360" controls>        <source src="__VIDEO__.MP4" type="video/mp4" />        <sour...
Embed Code   <video width="640" height="360" controls>        <source src="__VIDEO__.MP4" type="video/mp4" />        <sour...
Embed Code   <video width="640" height="360" controls>        <source src="__VIDEO__.MP4" type="video/mp4" />        <sour...
Embed Code
JavaScript Library       •Custom Controls       •Added Features       •Browser & Device Fixes
Custom Controls
JavaScript LibraryADDED FEATURES         •Volume Control         •Full-window Mode         •Subtitles
JavaScript LibraryBROWSER & DEVICE FIXES  •iPad Poster Attribute Bug  •iPad JS in Head / iPhone JS not in Head  •Android T...
CSS Skin
CSS Skin
CSS Skin
CSS Skin
CSS Skin           <ul class="vjs-controls">            <li class="vjs-play-control vjs-play"><span></span></li>          ...
CSS Skin
CSS Skin
Resources     Video for Everybody       http://camendesign.com     Dive into HTML5       http://diveintohtml5.com     Vide...
http://videojs.com
Future         •Flash Player Integration          Modules         •HTTP Streaming         •HTML-Specific Effects &         ...
Video.js - How to build and HTML5 Video Player
Upcoming SlideShare
Loading in …5
×

Video.js - How to build and HTML5 Video Player

4,395 views

Published on

From the 'HTML5 player showcase/How to Build an HTML5 player' given at the Open Video Conference in October 2010.

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

No Downloads
Views
Total views
4,395
On SlideShare
0
From Embeds
0
Number of Embeds
78
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Video.js - How to build and HTML5 Video Player

    1. 1. Demo
    2. 2. Project Background • • Combinator • HTML5 Video Encoding INPUT FROM • Kroc Camen (Video for Everybody) • Mark Pilgrim (Dive Into HTML5) • Bruce Lawson (Opera & HTML5 Doctor)
    3. 3. VideoJS - 3 Pieces •HTML Embed Code (Video for Everybody) •Javascript Library (video.js) •CSS Skin (video-js.css)
    4. 4. Embed Code Video for Everybody By Kroc Camen
    5. 5. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
    6. 6. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
    7. 7. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
    8. 8. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
    9. 9. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
    10. 10. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
    11. 11. Embed Code
    12. 12. JavaScript Library •Custom Controls •Added Features •Browser & Device Fixes
    13. 13. Custom Controls
    14. 14. JavaScript LibraryADDED FEATURES •Volume Control •Full-window Mode •Subtitles
    15. 15. JavaScript LibraryBROWSER & DEVICE FIXES •iPad Poster Attribute Bug •iPad JS in Head / iPhone JS not in Head •Android Type Attribute Bug •Autobuffer => Preload •Missing Poster in Some Safari Versions •Cross-browser Load Progress Tracking •Firefox No-fallback on Incompatible Source
    16. 16. CSS Skin
    17. 17. CSS Skin
    18. 18. CSS Skin
    19. 19. CSS Skin
    20. 20. CSS Skin <ul class="vjs-controls"> <li class="vjs-play-control vjs-play"><span></span></li> <li class="vjs-progress-control"> <ul class="vjs-progress-holder"> <li class="vjs-load-progress"></li><li class="vjs-play-progress"></li> </ul> </li> <li class="vjs-time-control"> <span class="vjs-current-time-display">00:00</span> <span> / </span><span class="vjs-duration-display">00:00</span> </li> <li class="vjs-volume-control"> <ul><li></li><li></li><li></li><li></li><li></li><li></li></ul> </li> <li class="vjs-fullscreen-control"> <ul><li></li><li></li><li></li><li></li></ul> </li> </ul>
    21. 21. CSS Skin
    22. 22. CSS Skin
    23. 23. Resources Video for Everybody http://camendesign.com Dive into HTML5 http://diveintohtml5.com VideoJS Blog http://videojs.com/blog
    24. 24. http://videojs.com
    25. 25. Future •Flash Player Integration Modules •HTTP Streaming •HTML-Specific Effects & Interactions

    ×