Tag Archives: Free software

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.

HTML5 geolocation – What If the User Doesn’t Share His Position?

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

HTML5 Geolocation

So far we were used to expect something like this from our mobile phones with built-in GPS support. Every image or video clip then was automatically “tagged” with latitude & longitude geo data. With HTML5 coming features we discover new cool things we can do with our browsers. Such cool thing is the geolocation.

Geo Location

Support

As you may guess not every browser is supporting these HTML5 features, but out in the web there is quite good collection of tables comparing different browsers and their support level.

Firefox

This – as expected is a browser that supports this geo tagging. First of all you’ve to allow your browser to use your geo coordinates, as this can be private information.

Browser GEO Location

Once you do it you can access the geo coordinates, which by the way are quite accurate, with JavaScript.

What if you don’t share your position?

What happens if you don’t want to share your position? Actually I ran in this situation and as my application waited the coordinates – it was completely blocked.

The examples doesn’t show you something special. They simply describe how to get the coordinates, but doesn’t tell you what if the user doesn’t click on the “share” button.

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos);
}
...
 
function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}

Of course getPos() can be simply an anonymous function:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            position.coords.latitude;
            position.coords.longitude;
        });
}

Only the Firefox documentation tells you how to handle errors, simply add one more parameter – callback, for getCurrentPosition() method:

if (!!navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(getPos, onError);
}
...
 
function getPos(position) 
{
    position.coords.latitude;
    position.coords.longitude;
}
 
function onError()
{
   // handle error
}

Now you know where you don’t want to be.

Map Marker

Vendor Prefixes in CSS

css, , , , , , ,

Vendor Prefixes vs CSS3

Either are bad, because vendor prefixes work on specific browsers, while CSS3 is not implemented fully by those browsers. When talking about vendor prefixes in CSS, let me tell you in breve, what’s this. If you’d like to make rounded corner under Mozilla Firefox, you usually use a background image, but there’s another way to do it – with Mozilla specific CSS:

-moz-border-radius: 5px;

That’s bad because it works only on Mozilla based browsers, although there’s a webkit based similar syntax:

-webkit-border-radius: 5px;

Even after that our “favorite” browser MSIE until version 9 is not displaying any rounded corners.

In other hand CSS3 gives us the possibility to write the simple:

border-radius:5px;

which is not implemented in many currently used browsers, but it may be used for progressive enhancements.

In Breve …

Everybody’s talking about vendor prefixes after the famous post of PPK, but there are both opinions – pros and cons. However it’s good to use it, but very carefully, and think about what CSS3 may give you!

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.

What’s groovy in Firebug 1.5

web development, , , , , ,

Now Firebug 1.5 is out in the wild. What really impressed me is the significant difference between the last version and the really user friendly interface it gives.

One of my favorite features is that you can now sort the different columns in the Net panel. Now you can clearly see what’s the biggest component and what makes more traffic. This helps a lot once you decide to optimize the web page you’re watching.

Another good tool is that you can see the computed style, which however is only for Firefox and gives you partial information about all styles in different browsers, but it’s useful though.

I was pretty impressed by this version and I’d like to recommend it!