HTML5 video for everyone! March 1st, 2010

bruce lawson March 2nd, 2010 at 11:25 a.m.

Hey David

nice work! We released Opera 10.50 today, in which Ogg video is played using the HTML5 video element. Can you adjust the description on http://static.etianen.com/html5media/ to include Opera too, please?

Dave Hall March 2nd, 2010 at 11:45 a.m.

Not a problem! I've updated the demo page and slotted a mention of Opera alongside the other browsers in the docs.

Incidentally, I notice that you're correctly supporting the poster attribute of video tags. Chrome and Safari are currently being somewhat annoying by incorrectly interpreting the poster attribute and by ignoring autobuffer hints.

Now there are two browsers, Opera and Firefox, that are providing a correctly implemented video element! Awesome!

Ajit March 11th, 2010 at 5:50 p.m.

Nice work! Thank you.

Adam March 12th, 2010 at 1:35 p.m.

This is brilliant. Are you aware of a similar implementation of the HTML5 audio tag?

Karl Kelman March 13th, 2010 at 9:26 p.m.

Thanks! This seems like a much better method of presenting videos on the web - the quality of the h264 video converted from .mov using handbrake seems to be much better than anything that I could do with flash freeware.

I'm having a couple of odd problems, however, and I wonder if you, or anyone else in the forum has any ideas how to fix them.

All of the comments below relate to my page at:
http://www.karlkelman.com/skipictures/testers/test.html

Google Chrome plays the video once (with what I assume is the HTML Player), but won't play the video again without a refresh. It displays the still briefly at the start, but then goes to a blank screen, and doesn't display the still at the end.

IE, Mozilla uses the Flowplayer, I believe, instead of the HTML5 player. It will replay the video without a refresh, but I've got the same problem with It displays the still briefly at the start, but then goes to a blank screen, and doesn't display the still at the end.

Safari is similar, but never shows the still at all.

Any ideas what I'm doing wrong?

Thanks,

Karl

Karl Kelman March 13th, 2010 at 11:44 p.m.

Ok, I feel like a complete idiot. But, somebody else might have this problem as well. My video editing software quickly faded in my video at the start and faded it out at the end. So, when the player froze on the first frame at the start, a blank screen was displayed, and when it froze on the last frame at the end, a blank screen was displayed. Nothing wrong with the html code, just a failure to grasp the concept on my part.

-Karl

Karl Kelman March 14th, 2010 at 4:49 a.m.

Ok, after spending much of the day on this project, here are my results:
http://www.karlkelman.com/skipictures/testers/test.html
After reducing video size:

With Preload -

IE7 - Works Fine - Replays without refresh - loads quickly
Safari - Jerky and Boggy - But plays
Firefox - Plays - Looks Good
Google Chrome - Plays Looks Fine - Won't replay without a refresh
Opera - Plays - Looks Good - Ignores preload command and just launches
iPhone emulator - Looks Good

With Autoload -

IE7 - Works Fine - Replays without refresh - loads quickly
Safari - Jerky and Boggy - But plays
Firefox - Plays - Looks Good
Google Chrome - Plays Looks Fine - Won't replay without a refresh
Opera - Plays - Looks Good - smooth
iPhone emulator - Looks Good

So, the only real problem that I've got is that Google Chrome doesn't like to replay my videos without a refresh - any ideas on what's causing that. Chrome replays the cat video fine.

-Karl

Dave Hall March 14th, 2010 at 12:25 p.m.

Hi,

I'm run some tests using Chrome Mac Beta, and have the following observations to add:

- The OGV video can restart fine in Chome.
- The M4V video won't restart in Chome.

The solution is to put the <source> element that contains the OGV video first. That way, Chrome will play that one instead.

Clearly something is a bit off in your M4V video, but I don't know enough video encoding to help you out. Potentially this is just a bug in Chrome's h.264 codec.

Karl Kelman March 15th, 2010 at 12:07 a.m.

Thanks for your help and observations, Dave!

After some further research, here are some tentative observations I've made:

I was struck, when, looking at my skiing video, by how much better it looked in IE7 than any of the other browsers, and how much more consistent the playback was. Skiing videos need to be big to look good - the subjects are far away and moving fast, clarity of the scenery in the background is part of the appeal, etc. The cute kitty videos can be downsized and still look good, but skiing videos (and many other kinds of videos) need to be big.

I realized that the difference was Flowplayer (not to promote them - I'm sure that there are other good players. Flowplayer is common, free and easy to install, so I used it for my experiment. There could be even better players). None of the other browsers used Flowplayer, and their native capabilities to play h264 video in HTML5 simply didn't match Flowplayer's ability to buffer, stream, and deal with moderate bandwidth/big content problems.

Flowplayer won't get jerky and strange if it's overloaded with content - it will just smoothly pause. And, the progress bar at the bottom gives the visitor with any technical knowledge or common sense an understanding of bandwidth issues, should they arise.

None of the Chrome vs. h264 restart issues happen with Flowplayer, and Flowplayer seems to be pretty robust in terms of just playing video without getting excessively picky about how is was encoded. And, Flowplayer can play a variety of formats, so if strange patent issues surface with respect to h264, it wouldn't be that hard to go back and recode the HTML on various pages to change to a different video type (Flash, etc.)

And, the download and put on your server version of Flowplayer has the handy full screen button, which isn't present, to the best of my recollection, in any of the HTML5 players, or the Flowplayer fallback for IE provided by the Google script.

So, IMHO, for IE, Chrome, Firefox, Opera, and Safari (the desktop version I've downloaded), Flowplayer seems to be the better solution. The only problem is the iPhone and iPad OS that won't deal with flash.

I love the theory of HTML5. Video should be able to be played just like .jpg is displayed with a simple line of code. But, in my simple and unscientific experiment, the state of browser development simply wasn't up to that of a decent player.

Wouldn't it make more sense to use a player like Flowplayer for everyone with Flash (90%+), and have HTML5 as a fall back position for iPhones and iPads? What would be your thoughts on that? Is it possible to just put the HTML5 code inside the Flowplayer code where the "You Don't Have Flash" message would go?

Again, thanks for starting this interesting discussion!

To see the difference between these two experiments, you can visit:

http://www.karlkelman.com/skipictures/testers/test.html (HTML5)

and

http://www.karlkelman.com/skipictures/testers/testflowplayer.html (Flowplayer)

-Karl

Karl Kelman March 15th, 2010 at 12:13 a.m.

FYI on the experiment - the video on the Flowplayer page may look in better in part because it's a bigger file (10MB), less compressed from the huge .MOV files native to my camera. But, I simply couldn't most browsers (particularly Safari) to play a file that large using HTML5 without choking and stalling altogether.

-Karl

Dave Hall March 15th, 2010 at 9:30 a.m.

Your observations regarding the Flash player's ability to deal with large videos are interesting. As it happens, I'd agree that the Google Chrome native video player is still somewhat buggy. However, these are all still alpha-level pre-release features, so they're meant to improve! The final versions of the browser video players should be able to deal with anything Flash can, and won't have the overhead of having to download any additional SWF files.

Flash, however, is not going to save you from h.264 licensing issues. The FLA format is just a container for h.264 or h.263 videos. The only thing that will save us from video licensing nightmares is widespread adoption of free codecs such as Ogg Theora.

The lack of a fullscreen option on HTML5 video players is annoying. The specification disallows allowing scripting access to fullscreen mode, but encourages browsers to include a built-in control for doing so. So far, none of them have.

In general, it's important to bear in mind that the HTML5 video players are still under development. They're currently fine for simple applications, but basing your business model around them might still be a little premature. :)

Vic Swift June 29th, 2010 at 6:53 p.m.

I was having a problem getting Firefox to fallback to the Flowplayer even on your test page. I removed the enclosing quotes from the codecs parameters and all is well. Top script!