无法让 swfobject 2.3.2 在 Firefox、Chrome 或 Safari 上运行

Question

我正在尝试将我的网站从使用 swfobject 1.5 升级到 2.3.2（最新版本），我无法让视频在 Mac 上的 Firefox、Chrome 或 Safari 中播放。占位符被播放器的轮廓替换，但如果我在播放器区域中单击鼠标右键，我会收到消息：“电影未加载...”。我从网上的各种例子中提取了这些例子，这些例子看起来都非常简单，而且似乎都同意。

我相信路径是有效的，因为我看到的所有示例都显示电影文件路径是相对于托管页面的（而不是相对于 swfobject.js 文件的位置，与 v1.5 一样）。无论如何，我相信该路径是有效的，因为如果我使用无效路径，则不会为播放器腾出空间。我什至尝试过使用绝对 URL。该文件本身也是有效的，因为我可以使用 swfobject v1.5 毫无问题地播放它。

我也尝试将 javascript 代码放在头部和媒体空间的正下方（不是同时），但结果完全相同。

这是嵌入代码：

Javascript（在头部）：

<script type="text/javascript" src="../media/flash/swfobject.js"></script>
<script type="text/javascript">
  swfobject.embedSWF('../media/video/jewels.mp4', 'mediaspace_jewels', '400', '326', '10.0.0');
</script>

HTML：

<div style="text-align:center; width: 640px; margin: 30px auto;" id="jewels_video_container">
  <p id="mediaspace_jewels">-- Something went wrong --</p>
</div>

如果我在 Firefox 检查器中检查生成的代码，它会显示：

<object style="visibility: visible;" data="../media/video/jewels.mp4" type="application/x-shockwave-flash" id="mediaspace_jewels" height="326" width="400"></object>

编辑：

我有点困惑的是，我还没有找到关于我如何引用我正在使用的播放器 (JWPlayer) 的指示。在 v1.5 中，它作为 SWFObject 构造函数中的第一个参数传递。

EDIT2：

这是一个例子： http://kevinallasso.org/flashexample/html/psychotic.html

目录结构已公开以供检查。

Answer 1

您正在尝试嵌入 MP4 文件。 SWFObject 仅嵌入 SWF，然后您需要有一个 SWF 文件来加载您的 MP4（例如 JWPlayer）。

JWPlayer 有自己的嵌入代码，不需要使用 SWFObject。此外，JWPlayer 支持 MP4 的 HTML5 播放，因此甚至不需要 Flash（但可以作为旧浏览器的后备使用）。 https://support.jwplayer.com/customer/portal/articles/1406723

Answer 2

正如 pipwerks 指出的那样，swfobject.embedSWF 的 arg[0] 是数据，而不是电影文件，因此 Flash 播放器 .swf 需要到那里（例如 JWPlayer）。那么我们如何让它播放mp4呢？我们如何告诉它播放什么文件？ arg[6] 将flashvars 作为对象，因此文件名可以作为file 属性输入，海报图像作为image 属性输入。 arg[7] 将params 作为对象。

本质上，我们的代码变成这样：

<script type="text/javascript">
  var params = {
    allowfullscreen: "true",
    allowscriptaccess: "always"
  };
  var flashvars = {
    file: "my_video.mp4",
    image: "video/my_video_poster.jpg"
  };
  swfobject.embedSWF("video/player.swf",
                     "demo_video_flash",
                     "400",
                     "326",
                     "10.0.0",
                     "video/expressInstall.swf",
                     flashvars,
                     params);
</script>

参数如下：

0) Flash 播放器 swf 的位置
1) 将被播放器替换的元素的 ID
2) 视频宽度
3) 视频高度
4) 允许的最低版本 Flash
5) expressInstall.swf - 如果版本过时，Adobe 会提示（见下文）
6) 闪存变量
7) 参数

生成的代码变成：

<object style="visibility: visible;" data="flash/player.swf" type="application/x-shockwave-flash" id="demo_video_flash" height="326" width="400">
  <param value="true" name="allowfullscreen" />
  <param value="always" name="allowscriptaccess" />
  <param value="file=my_video.mp4&image=video/my_video_poster.jpg" name="flashvars">
</object>

请注意，与 SWFObject 1.5 一样，file 属性（我们电影的文件名）是相对于 Flash 播放器的位置，image 属性（海报图像）是相对于 HTML 文件。

arg[5]，“expressInstall.swf”参数，指向一个 Flash 文件，如果它已过期，它将触发用户更新其 Flash 版本的提示。更多关于快速安装：http://learnswfobject.com/the-basics/adobes-express-install/

swfobject.embedSWF 实际上需要 10 个参数；我不知道最后两个是什么。

附注：

虽然 SWFObject 2.3 已更新以提供 HTML5 支持，并且不再使用 <embed> 标记，而是使用 <object> 标记（请参阅下面的第二个链接了解基本原理），但它是 Flash 嵌入工具而不是视频嵌入工具，因此不提供独立的“带有 Flash 后备的 HTML5”支持（即，它不会编写 <video> 标签），JWPlayer 6 和 7 以及其他的嵌入代码也是如此。必须明确处理 HTML5 视频支持，如本文所示：http://henriksjokvist.net/archive/2009/2/using-the-html5-video-tag-with-a-flash-fallback/。
另见：https://github.com/swfobject/swfobject/wiki/SWFObject-and-HTML5。

SWFObject 确实有一个优势，因为它可以离线使用，并且如果这是一个问题，也不会向任何实体发送数据。一些提供完整 HTML5 支持的播放器只能在线使用（例如，JWPlayer 的完整支持版本）。