How to play videos in all browsers / devices with JW Player?
I am using JW Player in my proyect which contains many videos in formats: MP4, FLV, OGV, WMV
I have read the documentation about the different formats supported by each browser. So now I am 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 does: check browser if HTML5 or FLASH support -> Depends on browser autoplaying MP4 (Chrome - Safari) or FLV (IE) or WEBM (Mozilla).
Because, especially in mozilla, I got the message for the first time: "ERROR LOADING MEDIA: The file could not be played." Then when I press 2 or 1 times, play the video.
Maybe this is happening for file order?
UPDATE
I changed my mime.conf and .htaccess settings by adding the following lines:
NOTE. I am using .htaccess for 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 disabled gzip compress but the problem persists. Only my app in iframe from facebook crashed from website. MP4 works fine.
UPDATE 2
The problem here is Twitter Bootstrap. I use this to show modals. Before showing the modal video, I save cookies in the browser.
When I put a video in a modal, the video cannot play. When I click 2 times on a video, that video plays. Mozilla Firefox only; Chrome, IE 7-8-9 works great.
When I post the video from the modal. This game is usually playable in all browsers.
Sorry for my English.
source to share
Since by looking at your link I was able to determine that you are using JW6 now and not JW5, you should use a 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:
jwplayer('container').setup({
height: 309,
width: 549,
playlist: [{
sources: [
{ file: "video.mp4" },
{ file: "video.webm" },
{ file: "video.flv" }
]
}]
});
This is because in JW6 modes, HTML5 is already the main mode, and "levels" are replaced by "sources".
Here is the migration document - http://www.longtailvideo.com/support/jw-player/28834/migrating-from-jw5-to-jw6
An example of multiple files used in jw6 is here - http://www.longtailvideo.com/support/jw-player/29251/mp4-and-webm-formats
source to share