Javascript 如何使用 JW Player 在所有浏览器/设备中播放视频？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14490669/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to play video in all browser/device using JW Player?
提问by user6964
I using JW Player in my proyect that contain many videos in formats: MP4, FLV, OGV, WMV
我在我的项目中使用 JW Player，其中包含许多格式的视频：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).
我阅读了每个浏览器支持的不同格式的文档。所以，现在我使用 MP4（Chrome、Safari）、FLV（IE、7、8、9）和 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.
我的问题是，如果此代码执行以下操作：检查浏览器是否支持 HTML5 或 FLASH -> 依赖浏览器自动再现 MP4(Chrome - Safari) 或 FLV(IE) 或 WEBM(Mozilla)。
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.
因为，尤其是在 mozilla 中，我第一次收到消息：“错误加载媒体：无法播放文件”。然后当我单击 2 或 1 次时，播放视频。
Maybe this occurs for the order of files?
也许这发生在文件的顺序上？
UPDATE
更新
I changed my mime.conf settings and .htaccess, adding the following lines:
我更改了 mime.conf 设置和 .htaccess，添加了以下几行：
NOTE: I use the .htaccess of Drupal in my Codeigniter Project
注意：我在我的 Codeigniter 项目中使用 Drupal 的 .htaccess
.htaccess:
.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.
我禁用了 gzip 压缩，但问题仍然存在.. 只有我的应用程序进入 facebook 的 iframe 才能使视频 webm 失败。MP4 工作正常。
UPDATE 2
更新 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.
这里的问题是 Twitter Bootstrap。我用它来展示模态。在用视频显示模态之前，我将 cookie 保存在浏览器中。
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.
当我将视频放入模态时，视频无法播放。当我点击视频 2 次时，该视频会播放。仅在 Mozilla Firefox 中；Chrome，IE 7-8-9 工作正常。
When i put the video out the modal. This play normally in all browser.
当我将视频放出模态时。这在所有浏览器中正常播放。
Sorry for my english.
对不起我的英语不好。
采纳答案by emaxsaun
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.
由于查看您的链接，我已经能够确定您现在使用的是 JW6，而不是 JW5，您应该使用不同的代码。
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".
这是因为在 JW6 模式中删除了，HTML5 已经是主要模式，并且“级别”被“来源”取代。
Here is a migration doc - http://www.longtailvideo.com/support/jw-player/28834/migrating-from-jw5-to-jw6
这是迁移文档 - 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
在 jw6 中使用的多个文件的示例在这里 - http://www.longtailvideo.com/support/jw-player/29251/mp4-and-webm-formats
