Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building an HTML5 Video Player

Slides from my talk discussing my experience rebuilding a video player I previously developed in Flash. I gave this talk on March 18th, at the Brisbane Web Design Meetup.

  • Be the first to comment

Building an HTML5 Video Player

  1. HTML 5 <video> <future answer=”maybe”> <darkside unknown=”1”> </video>
  2. @jimjeffers blog: DontTrustThisGuy.Com company:
  3. The Flash Player <video> Support <video> Formats Workflow Wins! Example
  4. GOAL OF THIS TALK: Understand the present state of <video> and when, why, and how you’d want to implement the technology.
  5. Flash Player * Closed Format * Powerful * Everyone Has It
  6. Market Penetration 8 99% 9 98.9% 10 94.7% 5 31.1% flash penetration: html5 video penetration:
  7. HTML 5 * Open/Closed Format * Powerful * Not Ubiquitious
  8. Works on... Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Opera 10.5+
  9. and on... iPhone iPod Touch iPad Android OS
  10. <video> is only going to become more ubiquitious in the future and is already relevant for playing video on mobile devices.
  11. Format Wars * h.264 (closed) * Ogg Vorbis (open)
  12. HTML5 Video Supports Any Media. It’s the browser that dictates which formats are played.
  13. DiveIntoHTML5 for a detailed explanation on the formats that can be utilized in HTML5 and more...
  14. HTML 5 Workflow Wins
  15. Basic Video Embed use the browser’s native video controls <video width="480" height="380" controls> <source src="trolololololololol.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="trolololololololol.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video>
  16. Video With Player UI Expressed in HTML Markup <div id="player"> <video width="480" height="380" class="ecard"> <source src="trolololololololol.ogv" type='video/ogg; codecs="theora, vorbis"'> <source src="trolololololololol.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> </video> <nav class="player_controls"> <a href="#" class="play_button">Play<span></span></a> <a href="#" class="mute_button">Mute<span></span></a> <progress value="0" class="play_progress"> <span></span> </progress> <progress value="0" class="load_progress"> <span></span> </progress> </nav> </div>
  17. CSS to Style Player UI /* =CONTROLS ------------------------------------------------------ */ .player_controls { bottom: -20px; height: 70px; left: 0; position: absolute; width: 480px; z-index: 10; } /* =PLAY/MUTE BUTTONS ------------------------------------------------------ */ .player_controls a.play_button { bottom: 0; left: -38px; } .player_controls a.mute_button { bottom: 0; right: -38px; }
  18. Javascript to Control Video $(’video’).get(0).play(); e ll the o uld t t t his w e lemen v ideo first o p age t on your . p laying st art
  19. Javascript to Control Video var _MEDIA = $(’#player video.ecard’).get(0); get the video element... $(’.play_button’).click(togglePlay); $(’.mute_button’).click(toggleMute); function togglePlay(e) { if(_MEDIA.paused) { add some simple; event listeners.... } else { if paused play _MEDIA.pause(); otherwise pause... } return false; }; function toggleMute(e) { if(_MEDIA.volume > 0) { _MEDIA.volume = 0; } else { _MEDIA.volume = 1; if it has volume mute } otherwise turn on volume... return false; };
  20. <video> methods & attributes var video = $(’video’).get(0);; video.pause(); video.paused; // Returns true if video is paused. video.ended; // Returns true if video is over. video.volume; // Returns volume value (between 0-1) video.volume=0.5; // Sets volume value (between 0-1) video.currentTime; // Current point of time in the video. video.length; // Returns the length in seconds. video.seekable; // Returns true if supports seeking. video.playbackRate; // Allows you to rewind/fastforward.
  21. To see all of the <video> methods & attributes be sure to take a look at the whatwg working draft: or just use this link:
  22. Your standard HTML/CSS/JS workflow handles everything.
  23. In Flash we do all of the legwork to build things that are trivial in the DOM.
  24. Time for an Example
  25. Video player that loads and displays cuepoints and messages from a datasource. Skip to demo now if possible.
  26. Flash Implementation <html> js css SWF AS3 Service AS3 AS3 AS3 AssetEvent CoordinatorEvent CuepointEvent LayerEvent <xml> MessageQueueEvent PlayerControlEvent WarningEvent src.time Coordinator Cuepoint MessageQueue ! AS3 Stack has 20 custom classes. src.ui Layer LoadingBar ! Still depends on HTML/JS/CSS Message Layer OffensiveWarning 40+ Dev Hours PlayerControls Asset Client
  27. HTML5 Implementation <html> js css 4 Dev Hours
  28. Cuepoint Data In Flash <?xml version="1.0" encoding="UTF-8"?> <card offensive="false" version="2.0" id="1156"> <title>In Your Honor We'll Be Dancing</title> <library> <asset path="media/cards/1156/pickup.flv" duration="50.721" id="1156"/> </library> <timeline> <frame asset="1156"> <cuepoints> <cuepoint duration="3.5" fade="" time="0.3"> <layer type="fill"> <color>#000000</color> </layer> <layer type="message"> <content> <![CDATA[In your honor we'll be dancing...]]> </content> </layer> </cuepoint> <cuepoint duration="20.0" fade="" time="46.0"> <layer type="fill"> <color>#000000</color> </layer> <layer type="message"> <content> <![CDATA[Your personal message here.]]> </content> </layer> </cuepoint> </cuepoints> </frame> </timeline> </card>
  29. Cuepoint Data in HTML5 <ol class="cuepoints"> <li id="cuepoint_1" class="cuepoint" data-time="0.3" data-duration="3.5"> <p class="message">In your honor we'll be dancing...</p> </li> <li id="cuepoint_2" class="cuepoint" data-time="46.0" data-duration="20"> <p class="message">Your personal message here.</p> </li> </ol>
  30. Certain things which may be complex in Flash are trivial to implement in HTML as the DOM can do all of the ‘heavy lifting’ for you.
  31. Both technologies still have their purposes. It’s important not to rally behind technologies. Use the right tool for the job be it HTML5 or Flash.
  32. Be sure to read: The Cold War of The Web
  33. Do you guys have any Questions? the end