×
  • Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
 

Building an HTML5 Video Player

by Interaction Designer / Web Developer at Sumo Creations LLC on Mar 19, 2010

  • 113,289 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
113,289
Views on SlideShare
61,325
Embed Views
51,964

Actions

Likes
38
Downloads
796
Comments
12

73 Embeds 51,964

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

Accessibility

Categories

Upload Details

Uploaded via SlideShare 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 previous next Post a comment

  • MarkHarrison3 Mark Harrison 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
    2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • AshleySheridan AshleySheridan 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. 2 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • anm8tr Mike Wilcox, Director of Technology at Club AJAX @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. 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • paultheboat paultheboat 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? 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • jimjeffers Jim Jeffers, Interaction Designer / Web Developer at Sumo Creations LLC @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. 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • anm8tr Mike Wilcox, Director of Technology at Club AJAX I was aware of my incorrect statement pretty much after I wrote it but was curious how long I could get away with it. The video tag does act as little more than a link that launches the Quicktime player player though (in addition to a play button graphic and a still image of where the video was paused). And the QT player isn't HTML so of course you can't customize it. 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • jimjeffers Jim Jeffers, Interaction Designer / Web Developer at Sumo Creations LLC @shaver you in fact need all of those items depicted in this presentation. Of course none of the AS3 files sit on the server. The 40+ hours come in writing all of those AS3 files. You are gravely misunderstanding the point. This is from an actual use case where a web based service needs to deliver custom cue points created by users to the video. I've been a flash developer for over 11 years. I know what I'm talking about. With the HTML5 solution no cue point service needs to be generated as we can generate the cue point resources directly in the HTML yielded to the page from our server side software. There's no third party layer (this is the main burden of using flash).

    @Mike Wilcox You are wrong. The HTML5 video tag is the only way to deliver video content via a webpage to the iphone. You might be insinuating that your custom player does not appear onthe iphone however, this is correct. To my own dismay you can't customize the appearance of your video player on the iPhone. Any custm video UI or interaction with video need be done via native solutions.
    3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • aaustin15 Amy Austin, User Interface Designer at Electronic Arts @ shaver80 - since most of us have been dealing with video and Flash for so long, I tend to agree it doesn’t take 40+ hours. That being said, dealing with cuepoints in HTML5/JavaScript is more straightforward than in AS. Where I have found HTML5 video to be the most streamlined, however, is in audio control. In AS, in order to have any kind of audio control (when building a custom player) you have to pull the audio out of the video and put it into it’s own sound object. With HTML5/JavaScript there’s no need for that extra step. Just my opinion though, I do typically try to have a Flash fallback when I do use HTML5 video (which is not all that often). 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • SzymonPolok Szymon Polok, Właściciel at Web-Anatomy s.c. Imho the best idea is to use HTML5/Flash hybrid players like http://darkonyx.web-anatomy.com/en or http://videojs.com . With Flash alone you won't be able to reach people on mobile devides, while HTML5 is still in its early stages 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…
  • shaver80 shaver80 Gonna have to say that it does not take that long to implement a flash video with cuepoints. Nor does it take as much code as this slide show is showing. Nice presentation but be honest when showing the comparisons. 4 vs. 40+ hours. Then you add all this extra stuff to the flash implementation. You don't need js or xml. And wouldn't the AS3 be part of the SWF so one of those should go. Really? 3 years ago
    Are you sure you want to
    Your message goes here
    Processing…

110 of 12 previous next

Post Comment
Edit your comment

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