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

javascript, jwplayer, twitter-bootstrap, video

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

Problem

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.

Original source