It’s really full of video sharing websites out there, but in fact almost all of them use Flash player to display their video files. This is the reality now, but with the coming of HTML5, perhaps the things are changing a bit!

First of all if you start dealing with video sharing platforms the first thing to do maybe is to find a good Flash (.flv) player and to convert all your video content in FLV.

Few things to know with Flash video players:

1. The user can play those videos only after installing the Flash Plugin to his browser;
2. The video must be encoded either in FLV (or FLash Video) or in MPEG-4 with h.264 codec. Only than the Flash player can play it;

The HTML5, which can be described as variety of new “things” in the HTML comes with a native <video> tag. Something like the <img> tag where you can just point the source of the image in the src attribute.

First Question – How Does it Look Like?

To get more fluent with the <video> tag you must simply thing of it as a “complex” <img> tag. You just point to the video and the browser will do the rest. To be more exact let me send you to the w3schools page, but the important thing as they say:

Until now, there has never been a standard for showing video on a web page.

However to start from somewhere here’s a little snippet showing you the basic, but very basic usage of the HTML5 video tag:

<video src="path_to_the_video" controls="controls"></video>

Second Question – Is Every Video Playable?

But of course not! There are different browser – different video formats. Currently there are three formats, supported by the different browsers.

1. H.264
2. VP8
3. Theora

Note that these are video codecs and a video files does not consists of only a video codec, but also of an audio codec. This makes the video file a container of several things. As you may know already H.264 is used with MPEG-4 video format, which results in .mp4 extended files, Theora is used in OGG, which are all those .ogg files out in the web, and finaly VP8 is used in WebM … or in .webm videos.

First thing to know FLV files (.flv) can also be encoded with H.264. Actually Flash player has a h.264 decoder so this makes it possible to play both .mp4 and .flv files encoded with H.264.

Second thing to notice – where are those .webm files? I’ve never seen them!

Third Question – What is WebM and VP8?

Behind WebM and VP8 is Google. This is a new video format based again on Theora. Actually it pretends to be as good in compressing as H.264, which by the way is meant to be the best. But let me take a look at Nettuts+:

VP8, a relatively new codec, is the brainchild of On2 — the same guys behind Theora. Google acquired On2 in 2010, and opened up all the underlying patents for the codec into the public domain.

WebM, the container of choice for most current browsers, utilizes VP8 for compressing its video content and Vorbis for its audio. It produces content similar in quality to H.264.

It is completely royalty free, now and for the future. On the downside, though, it has limited hardware decoding support as well as third party device/mobile support.

Final Question – How Can I Convert a Video in WebM?

This answer is given by this article, where as it is said after having the ffmpeg version >= 0.6 you simply can use this command:

ffmpeg -i girltalk.mp4 -f webm -vcodec libvpx -acodec libvorbis -aq 90 -ac 2 girltalk.webm

Conclusion

It’s interesting to see what will happen one day. There is going to be either a harmonious life in the web video field or the codecs/formats will be as much as the browser? Who knows?

However FFMPEG is a converting program and many things depend on what kind of video files come as an input and what do you want to achieve as an output. Here comes the codec question, where various libraries can help. In my case, as I wrote few posts ago, I use MP4 as output encoded with h.264, both encoded with ffmpeg/libx264. So far so good, but there is one main problem that anyone used this pair knows.

Flash Player and MP4

As far as I know Flash Player 9 and beyond plays video files encoded with MP4/h.264 except the typical FLV (flash video files). This can help video sites not only to share their video content via web – within browser based flash players, but also to show them via some mobile device interface where MP4/h.264 is perhaps the only one reasonable solution. In this case the file is accessible in both medias.

By default Flash Player can play such FFMPEG encoded .mp4 files, but fist the whole file must be downloaded by the browser and only than the playback can begin. That’s because the FFMPEG puts meta info at the end of the video file, while the flash player needs it at the beginning and only than to begin playing while the file is still downloading.

qt-faststart

As the name of this software says this program helps you move the important meta info from the end to the beginning of the file. This helps the video to playback as early as possible. In an ideal circumstances everything works just fine, but there is a serious problem in fact.

qt-faststart and Server Crash

qt-faststart is responsible to move the meta info where it must be – at the beginning of the video file, but cannot finish execution when the video file is broken or the meta info doesn’t exists. Actually this is not a problem of qt-faststart, but to the video file. However this was a critical problem in my case, because the video files remains stuck for hours of execution and 99% of CPU usage.

Thankfully there is a solution and it can be found in the qt-faststart wrapper – qtfaststart.py

qtfaststart.py

written on Python this script overcomes the disadvantages of qt-faststart. As described by his author Daniel G. Taylor:

Works everywhere Python can be installed

Handles both 32-bit (stco) and 64-bit (co64) atoms

Handles any file where the mdat atom is before the moov atom

Preserves the order of other atoms

Can replace the original file (if given no output file)

With its help not only qt-faststart doesn’t crash, but also the video files remain progressive as desired. The installation process is as difficult as copy/paste on the server where Python must be installed.

Yes it may sound strange, but now with the upcoming HTML5 features every browser again is playing its own game. Firefox and Opera support only OGG Theora, Chrome and Safari only MP4 and what about IE .. it doesn’t support anything. Than why should we convert to mp4 with h.264 codec?

Because everybody is playing flash

And that’s again very sad but at least the flash players are playing mp4 with this encoding, which is good because this file will be playable under most of the mobiles. And if you have a large video site to support why don’t you convert to mp4 and play it with a Flash Player and give the opportunity to play mp4 on mobile.

Only one file under the sky

Thus you gain to keep only one file – playable under every device?

YouTube and FLV

Now I wonder why YouTube have both FLV and MP4 formats?

Of course if you’d like to be perfect …

Convert every video to MP4, FLV and OGG, but that means 3 files for every video?!

That is the question.

HTML5 is mentioned as entirely new “thing” out in the web, but what it actually means is rather a collection of new, unknown for the current HTML version, features. One of the most interesting and used things in HTML5 are the support of a video in a entirely new “video” tag. Until now the playing of a video was either with Flash player or with Quick Time. But in both cases it relied on a third party plugins. Of course normally the question about performance was inevitable. Which is faster? But imagine we didn’t have the IMG tag? This give you the answer – using third party plugins always slows down the page, and today most of the web is based on video sharing and therefore the browsers become slower!

Performance of HTML5 video tag against Flash video players

As I mentioned above the performance of HTML5 video should be way better than the performance of any Flash video player. To be more precise I’ll reference an article from ajaxian.com, where the author points on his turn an interesting presentation. Indeed the performance of HTML5 video was way, way better:

But sometimes this doesn’t resolves all the problems. Normally with this “new” technique of putting a video into the page, come some additional issues.

First of all there are many codecs that the browser should support and almost always there is something “your” browser don’t support. That makes the task bigger. Now you should support more and more video file formats for the different browsers. And yet another problem is the detection of this codec support.

Detection and integration

Lucky enough, I found a great article and tutorial describing how to integrate HTML5 video with progressive enhancement. First of all you can check for it’s support than downgrade to Quick Time and Flash and if the client doesn’t support even that – render an image.

You can find the source here.

Thanks to this technique you can fully integrate new video tag into your page. Remember that most of the clients for sure will be happy to watch video in a more user friendly manner.