Tag Archives: Flash Video

Few Thoughts on Web Video

micro tutorial, web development, , , , , , , , , , , , , , , , , , ,

On Air


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. Continue reading Few Thoughts on Web Video →

How to Make MP4 Progressive with qt-faststart

web development, , , , , , , , , , , , , , , , , ,

A big part of the developers worldwide, who have dealt with video converting, sooner or later have been used FFMPEG. In fact I’d say that two of the main software on the video converting scene are FFMPEG and Mencoder. I began to use Mencoder back in 2005 and I used it as a DVD ripping tool, but my experience with it ends there, while now I use FFMPEG.

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:

  1. Works everywhere Python can be installed
  2. Handles both 32-bit (stco) and 64-bit (co64) atoms
  3. Handles any file where the mdat atom is before the moov atom
  4. Preserves the order of other atoms
  5. 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.

Video sites must use … mp4 and only mp4!

web development, , , , , , , , , , ,

H.264

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?!

Does Firefox play mp4 h.264 within the HTML5 video tag?

web development, , , , , , , , , , , , ,

As Firefox has declared it will play only open formats within the HTML5 video tag support. But however is there any way to play video with the mp4 h.264 codec under FF with no plugin support?

That is the question.

HTML5 video support. Detecting, playing and progressive enhancement!

web development, , , , , ,

HTML5 video

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.