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

Posted

技术标签:

【中文标题】无法让 swfobject 2.3.2 在 Firefox、Chrome 或 Safari 上运行【英文标题】:Cannot get swfobject 2.3.2 working on Firefox, Chrome or Safari 【发布时间】:2016-07-15 01:40:39 【问题描述】:

我正在尝试将我的网站从使用 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"  ></object>

编辑:

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

EDIT2:

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

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

【问题讨论】:

【参考方案1】:

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

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

【讨论】:

谢谢,很高兴知道这一点,JWPlayer 使嵌入变得非常简单,而且 v6 和 v7 提供完整的 HTML5 支持(编写 video 标签)这一事实非常吸引人。对我来说唯一的问题是提供HTML5支持的JWPlayer版本(不要写embed标签)不能离线使用,这是我需要的,而我觉得更私密的较低版本需要外部嵌入代码(如 SWFobject)。【参考方案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"  >
  <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 支持,并且不再使用 &lt;embed&gt; 标记,而是使用 &lt;object&gt; 标记(请参阅下面的第二个链接了解基本原理),但它是 Flash 嵌入工具而不是视频嵌入工具,因此不提供独立的“带有 Flash 后备的 HTML5”支持(即,它不会编写 &lt;video&gt; 标签),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 的完整支持版本)。

【讨论】:

SWFObject 与视频无关,说它不支持视频是不公平的,因为它从未打算支持。 SWFObject 所做的只是通过将&lt;object&gt; 写入HTML 文件来嵌入SWF(不是视频)。 SWFObject 不是视频嵌入工具。 @pipwerks:编辑了我的答案以阐明 SWFObject 的功能。

以上是关于无法让 swfobject 2.3.2 在 Firefox、Chrome 或 Safari 上运行的主要内容,如果未能解决你的问题,请参考以下文章

如何防止 Javascript 菜单隐藏在 Flash 视频 (SWFObject) 下

Flashvars 未定义

用 SWFObject 代替常规嵌入真的很重要吗?

SwfObject - 在没有“允许运行...”Firefox 消息的情况下检测闪存

如何在 swfobject.embedSWF 中使用 flashvars 属性?

我需要swfobject.js的替代解决方案