html中使用wmode参数详解

 在网页中嵌入swf文件时,经常会用到wmode这个参数,而嵌入的swf出现的一些问题也往往与这个参数有关。今天升级IE的flashplayer后,发现网页中有的swf不能显示,刚开始以为是升级没有成功,但重装flashplayer之后还是不能显示,经过一翻周折之后,发现问题还是出在wmode之个参数上。所以在这里再简单温习一下:

wmode有五个值,分别是'window','opaque','transparent','direct','gpu',后两个是对于flashplayer10及更高版本新增的和硬件加速有关的参数。

wmode='window'

缺省模式,在这种模式下flashplayer有自己的窗口句柄,这就意味着flash影片是存在于Windows中的一个显示实例,并且是在浏览器核心显示窗口之上的,所以flash只是貌似显示在浏览器中,但这也是flash最快最有效率的渲染模式。由于它是独立于浏览器的html渲染表面,这就导至flash影片总是会遮住位置与他重合的所有html元素。
需要注意的是,大多数苹果电脑浏览器会允许html显示在flash之上,但flash影片播放时会出现比较诡异的现象,比如html元素象被flash刮掉一块的样子。

wmode='opaque'

无窗口模式,在这种情况下flashplayer没有自己的窗口句柄,这就需要浏览器告诉flashplayer在浏览器的渲染表面绘制的时间和位置。这时flash影片就不会在高于浏览器html渲染表面而是与html在同一个页面上,因此你就可以使用z-index值来控制html元素在flash影片之上。

wmode='transparent'

透明模式,在这种模式下flashplayer的stage背景是透明的,flashplayer只会绘制stage上的元件,同样,你也可以使用z-index来控制flash影片的深度值,但与Opaque模式不同的是这样做会降低flash影片的回放效果,而且在flashplayer9.0.115之前的版本设置wmode='opaque'或'transparent'会导致全屏模式失效。

wmode='direct'

专为flashplayer10及以更高版本新增的参数,绕过浏览器进行渲染,相当于在独立的flashplayer中进行渲染。

wmode='gpu'

专为flashplayer10及以更高版本新增的参数,充分利用硬件来加速,但并不意味所有情况下使用此种模式都是好的,有些时候会事得其反。

注意:'direct'和'gpu'应该是与前面三个值不能同时用的,可能引起冲突或先设置的值失效。

今天遇到的问题发生在ie9浏览器:分别使用了滤镜和视频的两个flash影片,在原来的flashplayer 11.6.602.180能正常显示,但升级到flashplayer 13.0.0.214后却显示空白,后经去除wmode='transparent'参数,显示正常,当然某种情形下可能出现遮挡现象。
大多数情况下swf插入html能够得到满意解决,但个别时候可能有些纠结。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jPlayer是一个基于HTML5的音频和视频播放器库。它是一个开源的JavaScript库,可以轻松地嵌入到网站,用于播放音频和视频文件。以下是jPlayer的使用方法: 1. 引入jPlayer库文件 ```html <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/skin/blue.monday/css/jplayer.blue.monday.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.min.js"></script> </head> ``` 2. 创建播放器容器 ```html <div id="jquery_jplayer"></div> ``` 3. 初始化jPlayer ```javascript $(document).ready(function(){ $("#jquery_jplayer").jPlayer({ ready: function (event) { $(this).jPlayer("setMedia", { mp3: "path/to/mp3/file.mp3", m4a: "path/to/m4a/file.m4a", oga: "path/to/ogg/file.ogg", wav: "path/to/wav/file.wav" }); }, swfPath: "path/to/jplayer.swf", supplied: "mp3, m4a, oga, wav", wmode: "window", useStateClassSkin: true, autoBlur: false, smoothPlayBar: true, keyEnabled: true, remainingDuration: true, toggleDuration: true }); }); ``` 其,setMedia()方法用于设置要播放的媒体文件路径,supplied属性用于指定支持的文件格式,swfPath属性用于指定jPlayer.swf文件的路径。通过jPlayer的配置,可以实现很多自定义的功能,比如进度条、音量控制、全屏等等。 以上就是jPlayer的基本使用方法。需要注意的是,jPlayer需要在HTTP服务器上才能正常工作,不能直接在本地文件打开。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值