Serving the same H.264 video file to everyone, from Internet Explorer to iPhone

In a comment on my previous post Using the HTML5 <video> tag with a Flash fallback, Rob Colburn suggested serving everyone the same H.264 video file.

The big upside is that we only need to convert the video into one format. The downside is that we lose legacy Flash compatibility and Firefox 3.5+ and Opera 10+ users get Flash instead of HTML5 video.

This can be accomplished the following JavaScript code. Note that also I've replaced JWPlayer with Flashy, a GPL-licensed alternative.

    <script type="text/javascript">
      $(document).ready(function() {
        var v = document.createElement("video"); // Are we dealing with a browser that supports <video>? 
        if ( !v.play || $.browser.mozilla || $.browser.opera) { // If no, or Firefox or Opera, use Flash.
          var params = {
            allowFullScreen: "true"
          };
          var flashvars = {
            video: "video.m4v",
            poster: "snapshot.jpg",
            maintainAspectRatio: "false"
          };
          swfobject.embedSWF("videoPlayer.swf", "demo-video-flash", "480", "272", "9.0.0", "expressInstall.swf", flashvars, params);
        }
      });
    </script>

Here's the example in action.

Comments

I have yet to see the benefit of the html 5 recommendations as regards video. Flash is already on 99% of computers and it plays H.264 videos as well as On2VP6. If we are going to continue to support multiple video formats, multiple browser capabilities and multiple implementations of each browser vendor’s video player then I'd rather stick to flash since it normalizes these nuances.

Further, I’ve yet to see any built in video player handle good quality HD video 720p or 1080p without all the stutter/jitter. I don’t mean YouTube’s 720p or 1080p I mean videos encoded between 5000kbp-8000kbps. Flash and Silverlight can’t handle them either, the only players that do handle them and quite easily I might add are Window Media Player (on Windows) and Quicktime on MAC.

The other issues I have is the inability to “hide” proprietary code from the public when scripting/skinning the browser’s player. With Flash and Silverlight we have the option to do all kinds of things behind the scenes that is not visible in JavaScript.

Sure go ahead and support Ogg. And as far as licensing fees go, the big boys don’t have an issue with either On2VP6 or H.264. Individuals and smaller companies can go down the Ogg route.

The thing to do is to standardize on how the windows media player and quick time player are embedded in a web page, how they are scripted and such.

Flash is proprietary and non-standardized and fails miserably at most tasks beyond video, and then you have to constantly update it just for that, it's a no-win hole we're in. HTML 5 is browser based, speedy, platform independent, open, and no plugins required. It's nice to hold onto Flash, just like the argument was for floppy disks, but it is not a progressive argument. Flash and Silverlight have the goal of 'boxing in' the market, they are not toys created for individuals amusement, but proprietary technologies whose goals are to limit the web in order to create their companies greater profit on the content creation end. Internet Explorer is on 99% of computers, but it is non-standards based, and no where near the best browser available, so popularity and quality don't seemed to be linked at all. End users want end solutions, technologist want progress, when end users realize they consider only the moment, they will also understand that the roadmap technologists have is extrememely vital to everyone's progress. This is what technology does - moves civilizations forward. I choose not to live in the stone age - but embrace progress.

Firefox 3.6 wants to use the video tag and displays the poster image with a cross through it, your code looks okay though?

Post new comment

The content of this field is kept private and will not be shown publicly.
(I add rel="nofollow" to the link, so hold the spam)
No HTML allowed. Please use Markdown syntax to format content.