The improvements that have been added to HTML5 and how markup is evolving are great for the future of the web.
But I can’t help but feel frustrated that while we’ve come so far in certain areas, that we’re still a long way from being where we really want to be. One of those problematic areas is HTML5 video.
Why it’s taken so long to have a universal way to embed video natively in the browser without the need for a third-party plugin is beyond me. But it’s very difficult to get excited about something that is realistically not very practical or real-world ready.
I’m going to discuss here why I think HTML5 video is a great concept in principle, but a complete disaster in most practical usage.
Pure HTML5 Video Syntax
In a web developer’s ideal world, the syntax for embedding video using HTML5 would look something like this:
<video width="640" height="360" controls> <source src="video.webm" type='video/webm; codecs="vp8, vorbis"' /> </video>
One, easy-to-code, easy-to-maintain, chunk of code is the dream. But, as is often the case, that is not the reality. While there are projects like WebM and the new HTML5-video syntax that give us a glimpse into the future of web video, this is something that, unless you’re developing applications for a niche audience, is extremely far off.
Actual HTML5 Video Syntax
To help developers make the transition from Flash video to HTML5 video, a number of developers have started promoting code that works for “everybody”, most notably the Video for Everybody! project.
Video using HTML5 that works for “everybody” is possible because of how HTML5 is being designed. This is great, and realistically, there is no better way to gradually move to HTML5-based video.
Here’s the code offered by the Video for Everybody! project:
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="__VIDEO__.MP4">"MP4"</a>
Open Format: <a href="__VIDEO__.OGV">"Ogg"</a>
</p>
Even if we were to put aside the many codec issues associated with HTML5 video, the code needed (even in a best-case scenario) is not pretty. Not only that, but if you decide to make changes to any single video, the video needs to be re-encoded into two different formats (.MP4, .OGV) all over again. And if you’re using straight HTML to embed the code, the file name needs to be included in four or more places in the code.
(UPDATE: Originally I had said that three different files had to be re-encoded. This was not correct; the MP4 file is supported by Flash so it serves a dual purpose. I haven’t used Flash in so long that I just didn’t realize that the SWF file being referenced is just the Flash player.)
Fortunately, a good piece of code can utilize some form of back-end technology to make the file name problem easier to deal with and maintain. So, in PHP you could have something like this:
<video width="640" height="360" controls>
<source src="<?= $video; ?>.MP4" type="video/mp4" />
<source src="<?= $video; ?>.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="<?= $video; ?>.SWF">
<param name="movie" value="<?= $video; ?>.SWF" />
<param name="flashvars" value="controlbar=over&image=<?= $video; ?>.JPG&file=<?= $video; ?>.MP4" />
<img src="<?= $video; ?>.JPG" width="640" height="360" alt="<?= $video; ?>"
title="No video playback capabilities, please download the video below" />
</object>
</video>
<p> <strong>Download Video:</strong>
Closed Format: <a href="<?= $video; ?>.MP4">"MP4"</a>
Open Format: <a href="<?= $video; ?>.OGV">"Ogg"</a>
</p>
Now, instead of repeating the file name throughout, we use a variable and just append the file extension. I suppose you could also create a function similar to what I did here for CSS3 that would automatically include the extensions by means of passed arguments.
Putting aside my use of PHP short tags which evidently are not good practice, the use of a variable certainly makes things easier.
For How Long Will We Need This Horrible Code?
Although we’ve been encouraged to drop code forking and other unmaintainable coding solutions, when it comes to HTML5 video we’re back to square one, using bloated, unmaintainable code for which there is no guarantee that what we use today will work five years from now.
Even if we were to assume that one of the currently-supported video codecs will eventually become the universal standard, what’s the minimum time we have to wait before we can drop the extra Flash code and create pure HTML5 video that everyone can see and everyone can easily create and/or maintain? Due to the number of users still on older versions of IE, it will be a few years still — and more than likely at least five. That’s not a very encouraging prospect.
Nonetheless, having HTML5 video is certainly better than not having it (that’s about the only positive thing I can really say about HTML5 video!).
Okay, rant over. How do you feel about the state of HTML5 video? Can you honestly see yourself using it in any context that’s not targeting a niche audience?
I’ve come up with what I think is the ideal solution.
First of all, only support one video format: MP4 h264. This format of video works natively in all HTML5 browsers except Firefox, and it works with Flash.
Secondly, keep the markup clean and HTML5 compliant.
Thirdly, use JavaScript to create a fallback for browsers that can’t do native video in H264. The script logic should (1) check for native video capability, (2) If it can’t play the video naively, check for plug-in support such as Flash or Quicktime, (3) during run-time, replace the html5 video tag with a Flash or Quicktime tag if necessary.
This way, you only encode video in one format, the markup is clean HTML5, and the video plays everywhere (from iPhones to IE6). All you need is one reusable JavaScript file to add a plugin-based fallback for video. Checkmate!
Care to share this miracle script?
When I get time, I’ll release it as a jquery plugin.
I have to write some documentation and perfect the code a bit before I’m ready to release my video script to the public.
Here’s the miracle script: http://mediaelementjs.com/ It it a custom flash player that mimics the HTML5 video API so all browsers can play H.264 files.
I feel your pain, but HTML5 is still young, and it will get there. The Video for Everybody script is awesome because it supports so many devices without the use of Javascript. Check out the compatibility page. You can’t forget that many mobile devices don’t have JS at all, plus some browser users turn off JS. That might be a small percentage of your users, but bigger video platforms need to worry about that stuff.
That said, it is pretty bulky, and the Flash object could be dropped in favor of using javascript to swap it in, since if a user has Flash, they probably have javascript too. You should keep the download links though for compatibility. I’ll probably move that direction with VideoJS. For now, I made a builder for the Video for Everybody embed code.
http://videojs.com/embed-builder/
PS. You say “the video needs to be re-encoded into three different formats (.MP4, .OGV, and .SWF)”. The SWF doesn’t need to be re-encoded. That’s just the flash player. The last one should be WebM, FLV, or nothing depending on what you’re supporting.
@kayan: That is a direction I suggest for some VideoJS users who just want to encode to one format. It’s much nicer to just encode to MP4. There are a couple of reasons you might want to use the other formats as well.
1. Playback performance is typically better using the browser’s built in video player.
2. h.264 isn’t completely free. There are some situations even now where if you’re using it you should be paying royalties. And we could all get bit if they decide to charge for all use cases in the future.
3. You want to promote open standards and technology.
Otherwise just using an MP4 is perfectly fine, and tends to be more economical.
Cheers,
-Heff (VideoJS)
Hey, Heff.
Yes, thanks for pointing out that rather dumb mistake about the SWF files. I was on a no-computer vacation for the last two weeks, so I didn’t get a chance to correct that until now. I actually was doing a lot of reading while I was away and realized that mistake during some of my research, but couldn’t change it until I got back.
If you’re going to use php, why not write a php object that writes all that code for you, and just pass some variables to the object with video name and sizes? That way you just have a single line of code invoking the object. You’ll have to forgive me as I’m not up to speed enough to actually write this, but I imagine it’s possible. Feel free to call me a noob and correct me if I’m wrong. ;)
Video for everybody and HTML 5 are completely different things. Everybody now can use HTML4 and it’s deprectaed tags … and so will everybody in 5 years time. HTML 5 video however, is not accessible to everybody now and could very likely go the way of table layout design in 5 years when something hopefully superceeds HTML 5.
The last few years has seen a surge of technology and standard solutions come and go … I don’t see HTML 5 and CSS 3 being much different.
Good and useful article…
I’m just starting to look into html5 video. Is there a way to pass it variables like you can with Flash? A common scenario of mine is having a video that plays in a .swf, and I pass in a variable, maybe the customer’s name, dynamically, so each person that follows a link to a PURL (personalized URL) will be greeted by name in the video. Is there a similar way to pass in dynamic data to html5 video?
Interesting question.
Yeah, I used to do that in Flash, too. Well, the thing is, HTML5 video is not made for customized, personalized animations. It’s purely for video, that is, stuff like YouTube or Vimeo, that sort of thing, where you generally wouldn’t need to pass in variables.
In my understanding, passing in a parameter to a Flash movie, was done in a complex Flash animation where you customize the experience for the user. But now, you don’t need Flash to create those types of animated experiences anymore. You can do that sort of thing with JavaScript, CSS3 animation, or an animation library.
I guess I’d have to know what the situation is before I make any definite statements, but generally HTML5 videos wouldn’t need a variable passed in like that.