Webvidcoder – making video work in every browser and on every device

| 0 comments

Introduction

Like me, when you’re browsing the internet, you must have seen that showing movies on the internet is commonplace. That are very few internet users that have not stumbled upon Youtube. You will also notice many smaller sites and blogs that embedded movies in their webpages.

One of the reason for this ubiquity is the HTML5 standard. Before HTML5, there was no standard manner in which to show movies in your webpages. You could embed a third-party player such as QuickTime, RealPlayer, or a player made in Flash. But while this works nicely for the browsers that support these plugins, there where many just as many browsers that would not show your movie. Then came HTML5.

Enter HTML5

The HTML5 standard defines a standard way to embed video in a web page, using a <video> element. In principle, a video embedded in this tag should work within any browser, and any platform that supports HTML5. In practice however, it does not work that way. It turns out that a movie in one format works on one platform and browser, but fails miserably to run on the next platform. This is basically what is explained in this blog post.

Creating a video that works for everybody

So, when I first tried to embed a movie on this blog I was surprised that I could not get it to run in a Firefox browser and inthe Safari browser on the Ipad. After some research, I understood that it is necessary to make different versions of the source file, namely MP4, WebM and Ogg Vorbis format and combine them in the <video> tag in order to be compatible with most common browsers.

In order to do this, I first used a batch script I found online to transcode movies to the needed format and created the tag by hand, but recently I replaced the script by a more convenient tool, that does this: Webvidcoder does not only automatically recodes the video to all needed different formats, but I will also rescale the movie and embed it in a HTML5 video tag.

However, there are still older or specialized browsers around that do not support HTML5. Luckily, some people have worked hard to build HTML5 video player components that expand the native functionality, as can be seen in this extensive lists: player comparison. These video players often provide things like skinning, subtitles and more. But, most importantly, they also provide a flash-based fall-back for non-HTML5 environments.

Webvidcoder allows you choose one of several players (currently MediaElement.js, FlowPlayer & JWPlayer, but I plan to add more
When I decided to put Webvidcoder online, I decided to also add the functionality to automatically embed the videos in your player of choice so you can easily embed it your own website.

Webvidcoder

The application can be downloaded here:

Below is a screenshot of the application:

webvidcoderscreenshot Webvidcoder   making video work in every browser and on every device image

Screenshot Webvidcoder

And here is an example of a movies created using Webvidcoder:


The embedded sources are: mp4, ogv, webm, jpg

Please try to play it for your own devices and let me know how the tool works for you!. Also, if you use the tool to code your own movies, drop me a line. I would love to hear that it is put to good use!

Leave a Reply

Required fields are marked *.