Building an HTML5 Video Player
Upcoming SlideShare
Loading in...5
×
 

Building an HTML5 Video Player

on

  • 118,439 views

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.

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.

Statistics

Views

Total Views
118,439
Views on SlideShare
62,605
Embed Views
55,834

Actions

Likes
38
Downloads
803
Comments
12

74 Embeds 55,834

http://www.hongkiat.com 38288
http://d.hatena.ne.jp 9224
http://trans.hatenablog.jp 3589
http://mituoh.com 1592
http://www.slideshare.net 811
http://www.html5samples.com 656
http://www.multimediapedia.com 553
http://blog.dreamcss.com 450
http://djzezemusicafree.netau.net 104
http://translate.googleusercontent.com 62
http://www.e-seopro.com 56
http://www.edita.jp 52
http://feeds2.feedburner.com 51
http://49.212.174.187 33
http://demovinhasa.wordpress.com 31
http://blog.jaffamonkey.com 26
http://localhost 16
http://www.netvibes.com 16
http://webcache.googleusercontent.com 16
http://www.hanrss.com 15
http://tutorialdaily.collected.info 14
http://www.stirisinoutationline.ro 14
http://paper.li 13
http://sitebuilder.yola.com 11
http://hongkiat.collected.info 9
http://usabilityandwebdes.collected.info 9
http://xss.yandex.net 9
http://192.168.6.52 6
http://www.androidfools.com 6
http://dashboard.bloglines.com 6
http://9102646600155842240_b4dd4071be9de8b6ea914bb20becf12f2752ae48.blogspot.com 6
http://blog.pheromonic.com 5
http://webdesignerblogs.collected.info 5
http://www.twylah.com 5
http://www.pixel-push.com 5
http://smemalaysiatv.yolasite.com 4
http://www.newsblur.com 4
http://192.168.58.11 4
http://www.nitolmotors.com.bd 3
http://feeds.feedburner.com 3
http://www.devhub.com 3
http://sfondiperte.altervista.org 3
http://www.e-presentations.us 3
http://131.253.14.66 2
http://kashmirvaishnodevi.blogspot.in 2
http://search.yahoo.co.jp 2
http://drizzlin.com 2
http://www.mygameclip.com 2
http://mysoft.co.il 2
http://localhost:49271 2
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

110 of 12 Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • learning html and css web design, found this video tutorial and in all honesty i cant be doing with putting 40+ plus odd hours into making a flash player,
    whereas on the other side html5 allows me to make it in one day, seeming that im actually on my own in creating my own website,
    thanks you guys @ slideshare
    Are you sure you want to
    Your message goes here
    Processing…
  • Would love to know how Adobe calculates it's market penetration, because as it stands, various versions of Flash are installed on 323.7% of machines. Even if you assume that someone who has Flash 10 installed is also being included with the versions below that, then the figures below should always be equal to or greater than the higher versions above it. That would be true until you see their random figure for Flash Player 5.
    Are you sure you want to
    Your message goes here
    Processing…
  • @paultheboat: The HTML5 spec doesn't yet cover any meta data outside of duration, width and height (the video spec is one of the more volatile aspects of HTML5). You may have to do it the old fashioned way - with a data object (json or XML) of timestamps for cuepoints.
    Are you sure you want to
    Your message goes here
    Processing…
  • I'm still unclear how to encode and recover metadata (particularly cue-point metadata) in a video for HTML5. I make big use of cue-points using flash to trigger various other events, in particular the appearance and location of adverts related to the videos content at any point in time. I want to be able to do the same for the i-pad. any pointers?
    Are you sure you want to
    Your message goes here
    Processing…
  • @mike agreed, I was disappointed earlier this year as well but in the end it makes sense due to the limited screenspace and apple wanting control over the user experience. If you want a custom video player you'll need to do it by embedding a video player with some UIView's as overlays, much like building a custom camera UI.
    Are you sure you want to
    Your message goes here
    Processing…

110 of 12

Post Comment
Edit your comment

Building an HTML5 Video Player Building an HTML5 Video Player Presentation Transcript

  • HTML 5 <video> <future answer=”maybe”> <darkside unknown=”1”> </video>
  • @jimjeffers blog: DontTrustThisGuy.Com company: SumoCreations.com
  • The Flash Player <video> Support <video> Formats Workflow Wins! Example
  • GOAL OF THIS TALK: Understand the present state of <video> and when, why, and how you’d want to implement the technology.
  • Flash Player * Closed Format * Powerful * Everyone Has It
  • Market Penetration 8 99% 9 98.9% 10 94.7% 5 31.1% flash penetration: http://www.adobe.com/products/player_census/flashplayer/ html5 video penetration: http://gs.statcounter.com/#browser_version-ww-monthly-200812-201001
  • HTML 5 * Open/Closed Format * Powerful * Not Ubiquitious
  • Works on... Firefox 3.5+ Chrome 3.0+ Safari 3.1+ Opera 10.5+
  • and on... iPhone iPod Touch iPad Android OS
  • <video> is only going to become more ubiquitious in the future and is already relevant for playing video on mobile devices.
  • Format Wars * h.264 (closed) * Ogg Vorbis (open)
  • HTML5 Video Supports Any Media. It’s the browser that dictates which formats are played.
  • DiveIntoHTML5 for a detailed explanation on the formats that can be utilized in HTML5 and more... http://diveintohtml5.org/video.html
  • HTML 5 Workflow Wins
  • 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>
  • 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>
  • 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; }
  • 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
  • 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 _MEDIA.play(); 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; };
  • <video> methods & attributes var video = $(’video’).get(0); video.play(); 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.
  • To see all of the <video> methods & attributes be sure to take a look at the whatwg working draft: http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html or just use this link: http://bit.ly/2nkxD
  • Your standard HTML/CSS/JS workflow handles everything.
  • In Flash we do all of the legwork to build things that are trivial in the DOM.
  • Time for an Example
  • Video player that loads and displays cuepoints and messages from a datasource. Skip to demo now if possible. http://sumocreations.com/demo/rattlebox/player.html
  • Flash Implementation Viewer.as src.data <html> js css SWF AS3 Service AS3 src.events 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 src.video Asset Client
  • HTML5 Implementation <html> js css 4 Dev Hours
  • 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>
  • 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>
  • 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.
  • 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.
  • Be sure to read: The Cold War of The Web http://www.alistapart.com/articles/flashstandards/
  • Do you guys have any Questions? the end