无法让 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 支持,并且不再使用 <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 的完整支持版本)。
【讨论】:
SWFObject 与视频无关,说它不支持视频是不公平的,因为它从未打算支持。 SWFObject 所做的只是通过将<object>
写入HTML 文件来嵌入SWF(不是视频)。 SWFObject 不是视频嵌入工具。
@pipwerks:编辑了我的答案以阐明 SWFObject 的功能。以上是关于无法让 swfobject 2.3.2 在 Firefox、Chrome 或 Safari 上运行的主要内容,如果未能解决你的问题,请参考以下文章
如何防止 Javascript 菜单隐藏在 Flash 视频 (SWFObject) 下
SwfObject - 在没有“允许运行...”Firefox 消息的情况下检测闪存