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.
Mark Harrisonlearning 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 @ slideshare1 year ago
Are you sure you want to
AshleySheridanWould 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
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.2 years ago
Are you sure you want to
paultheboatI'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?2 years ago
Are you sure you want to
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.2 years ago
Are you sure you want to
Mike Wilcox, Director of Technology at Club AJAXI 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.2 years ago
Are you sure you want to
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.2 years ago
Are you sure you want to
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).2 years ago
Are you sure you want to
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 stages2 years ago
Are you sure you want to
shaver80Gonna 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?2 years ago
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
Atsushi Miura
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 1 year ago
@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. 2 years ago