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

时间:2016-03-27 19:10:00

标签: javascript html firefox flash swfobject

我正在尝试将我的网站从使用swfobject 1.5升级到2.3.2(最新版本),我无法在Mac上的Firefox,Chrome或Safari中播放视频。占位符将替换为播放器的轮廓,但如果我右键单击播放器区域,我会收到消息:"电影未加载..."。我从网上的各种例子中得出了所有看似非常简单并且似乎同意的例子。

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

我也尝试将javascript代码放在头部,也直接放在mediaspace下(不是同时),但结果完全相同。

这是嵌入代码:

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

公开目录结构以供检查。

2 个答案:

答案 0 :(得分:0)

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

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

答案 1 :(得分:0)

正如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)允许的最低版本的闪存
5)expressInstall.swf - 如果版本过期则提示Adobe(见下文)
6)flashvars
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>标记(请参阅下面的第2个链接以获取基本原理),它是Flash嵌入工具而不是视频嵌入工具,因此不提供独立的“HTML5 with Flash fallback”支持(即,它不会写<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的完全支持版本)。