加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

前端需要知道的flash

发布时间:2020-12-15 17:29:54 所属栏目:百科 来源:网络整理
导读:虽然现在html5越来越火,但有些情况下flash还是不可替代的。作为一个前端,事先了解一些flash的相关知识,会事半功倍。 创建flash 标准写法 1 object type= 'application/x-shockwave-flash' data= 'movie.swf' /object 很简单吧。象chrome,firefox,ie新版本

虽然现在html5越来越火,但有些情况下flash还是不可替代的。作为一个前端,事先了解一些flash的相关知识,会事半功倍。

创建flash

标准写法

1
<object type= 'application/x-shockwave-flash' data= 'movie.swf' ></object>

很简单吧。象chrome,firefox,ie新版本等高级浏览器都是支持这样的写法的。所以在未来我们可以用这种统一的试为引入flash。

不过可惜的是,理想的未来还很遥远。如你所料,老版本的ie是不支持这样写的,需要用classid和codebase两个参数,还需要一个name参数。

老版本的ie是通过 active object的方式来调用 flash的,classid就是active object的id。codebase是当浏览器没有装flash的时候可以通过codebase指定的地址去下载flash

1
2
3
<object classid= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0" >
<param name= 'movie' value= 'movie.swf' />
</object>

那么怎么写能兼容绝大多数浏览器呢,一般都是用object套一个embed

1
2
3
4
<object classid= "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase= "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0" width= "400" height= "300" >
<param name= "movie" value= "movie.swf" />
<embed src= "movie.swf" quality= "high" width= "400" height= "300" name= "movie" align= "" type= "application/x-shockwave-flash" pluginspage= "http://www.macromedia.com/go/getflashplayer" />
</object>

embed也可以引入flash不过支持embed的浏览器一般都支持object,不建议用embed来引入flash。

除了直接写html也可以用js动态创建flash
用 SWFObject 来动态创建flash。可以生成符合标准的代码,还可以检测版本。

用Html直接创建和用js生成各有好处,根据实际情况来选择吧

还有几个常用参数需要了解一下

1
2
3
4
5
6
<object type= "application/x-shockwave-flash" data= "movie.swf" >
<param name= "quality" value= "high" >
<param name= "wmode" value= "opaque" >
<param name= "allowscriptaccess" value= "always" >
<param name= "allowFullScreenInteractive" value= "true" >
</object>
  • quality,即是影片品质的意思,分为LOW,MEDIUM,HIGH,BEST。 flash 默认为HIGH。品质高了可能会影响播放速度,所以移动设备用MEDIUM。

  • wmode,控制flash 显示方式。需要用html元素显示在flash之上时用opaque模式

  • allowscriptaccess,是否允许flash与 js交互,有never,samedomain,always三个值

  • allowFullScreenInteractive,允许全屏且允许交互。需要flash播放器10.3以上,不过实际上建议10.9以上。如果是低于10.3的版本只能允许全屏 参数为 allowfullscreen

让flash生效

flash是一个特殊的元素,所以浏览器对它有一些特殊的待遇。但是只要注意以下几项,就没有问题了。

  1. 给flash一个宽和高

  2. 让flash在可见区域内

  3. 不要加display:none,visibility:hidden这样的属性

如果违反了这三项之一,浏览器可能会直接忽略flash。

隐藏flash

如果想让flash生效,又不想让flash 展现,有两个推荐的方法。

  1. 用一个层把flash遮住

  2. 加样式{position:absolute; z-index:-1;}

停止flash

不能简单的 {display:none;},这是不可靠的,可能flash还在继续工作。建议让flash暴露出一个方法,让js来调用这个方法,通知flash停止运行,释放资源。如果flash没有办法暴露接口,可以直接把flash删除。

获取flash对象

adobe官方给出的代码

1
2
3
4
5
6
7
8
9
10
11
function getSWF(movieName)
{
if (navigator.appName.indexOf( "Microsoft" ) != -1)
{
return window[movieName];
}
else
{
return document[movieName];
}
}

我测试用document.getElementById等方法获取dom的方法也是可以的。adobe给出的是兼容性最好的。

flash调用 js方法

对于8.0以上的版本都可以用 external api。很方便。
比如要调用 名为 isReady的 js 方法。

1
ExternalInterface.call( "isReady" );

没有external api时采用FSCommands方法。使用 fscommand() 函数,可以将消息发送到承载 Flash Player 的那个程序,例如 Web 浏览器。这个早已经不用了,知道一下就好,免得看到这个方法不知道是什么意思。

js调用 flash方法

首先flash需要把方法暴露给外部环境
比如暴露flash 的方法 getStatus给 js

1
ExternalInterface.addCallback( "getStatus" ,getStatus);

js调用flash 需要先获取flash对象
var swf=getSWF(‘movie’);
然后就可以调用 flash暴露的方法了
swf.getStatus();

ready状态检测

js与flash互通信之前需要确保flash,js都已经ready。
根据 adobe给的例子,是这样做的:

首先准备一个 检查js 有没有ready的函数

1
2
3
4
function isReady(){
....
//return true or false
}

当flash ready后去检测 js有没有ready.

1
var result:Boolean = ExternalInterface.call( "isReady" );

如果没有ready,隔100毫秒再去检测,直到ready。

我解释一下为什么用这样的方法来检测。

  1. 通常情况下,flash加载的会慢些,所以用flash来检测js

  2. js ready的含义不只是js文件已经加载,代码已经执行,而是说flash要调用的方法是可以用的,需要的数据,资源有没有准备好。

兼容老版本flash

我发现下面两条老版本的flash是不支持的

  1. 通过函数返回值传递数据

  2. 原生json支持(需要Player版本大于等于11)

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读