How to play video in all browser/device using JW Player?

Question

I using JW Player in my proyect that contain many videos in formats: MP4, FLV, OGV, WMV

I read the documentation of the diferent formats that each browser support. So, now i using MP4 (Chrome, Safari), FLV(IE,7,8,9) and WEBM(Mozilla).

jwplayer('container').setup({
                height: 309,
                width: 549,
                levels: [
                    { file: "video.mp4" },
                    { file: "video.webm" },
                    { file: "video.flv" }
                ], 
                'modes': [
                    {type: 'html5'},
                    {type: 'flash', src: "jwplayer.flash.swf"},
                    {type: 'download'}
                ]
});

My question is, if this code doing: Check the browser if support HTML5 or FLASH -> Depend of browser reproduce MP4(Chrome - Safari) or FLV(IE) or WEBM(Mozilla) automatically.

Because, in mozilla especially, for first time i have the message: "ERROR LOADING MEDIA: File could not be played" .Then when i click 2 or 1 time, play the video.

Maybe this occurs for the order of files?

---

UPDATE

I changed my mime.conf settings and .htaccess, adding the following lines:

NOTE: I use the .htaccess of Drupal in my Codeigniter Project

.htaccess:

#
# Apache/PHP/Drupal settings:
#

#For disable gzip
SetEnvIfNoCase Request_URI \.(og[gv]|mp4|m4v|webm)$ no-gzip dont-vary

#For add mime types
AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm
[...]

mime.conf

#
# If the AddEncoding directives above are commented-out, then you
# probably should define those extensions to indicate media types:
#
AddType application/x-compress .Z
#AddType application/x-gzip .gz .tgz
AddType application/x-bzip2 .bz2
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

I disable gzip compress but the problem persist.. Only my app into iframe of facebook fail the video webm. MP4 Works fine.

---

UPDATE 2

The problem here is Twitter Bootstrap. I use this for show modals. Before show the modal with the video, i save cookies in browser.

When i put the video into a modal, the video can't play. When i click 2 times to the video, this video play. Only in Mozilla Firefox; Chrome, IE 7-8-9 works fine.

When i put the video out the modal. This play normally in all browser.

Sorry for my english.

Solution

Since from looking at your link, I have been able to determine you are using JW6 now, not JW5, you should be using different code.

This code:

jwplayer('container').setup({
                height: 309,
                width: 549,
                levels: [
                    { file: "video.mp4" },
                    { file: "video.webm" },
                    { file: "video.flv" }
                ], 
                'modes': [
                    {type: 'html5'},
                    {type: 'flash', src: "jwplayer.flash.swf"},
                    {type: 'download'}
                ]
});

Should look like this, instead, for example:

jwplayer('container').setup({
                height: 309,
                width: 549,
                playlist: [{
                sources: [
                    { file: "video.mp4" },
                    { file: "video.webm" },
                    { file: "video.flv" }
                ]
                }]
});

This is because in JW6 modes is removed, HTML5 is already the primary mode, and "levels" is replaced by "sources".

Here is a migration doc - http://www.longtailvideo.com/support/jw-player/28834/migrating-from-jw5-to-jw6

An example of multiple files being used in jw6 is here - http://www.longtailvideo.com/support/jw-player/29251/mp4-and-webm-formats