页面声音播放(HTML5 embed标签)

博客介绍了HTML5中的<embed>标签用于页面声音播放,但不同浏览器的实现存在差异。在IE中,会嵌入Windows Media Player并根据loop属性循环播放;Google浏览器则可能不支持loop属性,不会循环播放;而Firefox则提示安装插件,如QuickTime,但可能无法正常显示。使用<embed>标签播放声音需考虑浏览器兼容性问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<embed>标签是html5中的新标签。

<embed> 标签定义嵌入的内容,比如插件,当然也可以用来嵌入声音。

举例如:

<embed id="sound" src="/sound/alarm.wav" loop="-1" autostart="true" hidden="true"></embed>

 

src:嵌入内容的url

loop:循环次数,-1为一直循环

 

当我用ie打开包含这个标签的页面时,如果把标签的hidden属性改为false,就会看见页面中嵌入了一个windows media player播放器,并且该播放器在循环播放/sound/alarm.wav,如果禁用掉windows的windows media player服务,打开页面后既没有嵌入的播放器,也听不到声音

用ie的控制台看到:

 

用google打开效果完全不同,也是嵌入了一个播放器,但是不知道是什么播放器,并且loop=-1的设置失效了,声音并不会循环,只会响一次

用google的控制台看到:


ff就比较给力了,应该是没有默认的媒体播放插件,直接提示我需要安装一个插件来显示此内容,点了下搜索,提示有一个apple的QuickTime可以安装,安装下看看效果,什么都没有,空白一片

查看控制台显示的和ie差不多:

 

看来如果使用embed标签来播放声音,本质上还是通过在浏览器中嵌入一个播放器插件来播放声音,但是不同的浏览器实现好像差别还挺大的,这个要特别注意

 

代码:< EMBED src=“music.mid”autostart=“true”loop=“2”width=“80”height=“30”> src:音乐文件的路径及文件名;(完整的路径或URL) ShowTracker:为是否显示播放进度条 ShowPositionControls:为是否显示播放控制按钮如快进等 ShowAudioControls: 为控制是否显示音量按钮 ShowStatusBar: 是否显示咨询窗 ShowDisplay: 为显示更完整的咨询视窗 EnableContextMenu: 防止使用右键 autostart:true为音乐文件上传完后自动开始播放,默认为false(否) loop:true为无限次重播,false为不重播,某一具体值(整数)为重播多少次 volume:取值范围为“0-100”,设置音量,默认为系统本身的音量 starttime:“分:秒”,设置歌曲开始播放的时间,如,starttime=“00:10”,从第10开始播放 endtime: “分:秒”,设置歌曲结束播放的时间 width:控制面板的宽 height:控制面板的高 controls:控制面板的外观 controls=“console/smallconsole/playbutton/pausebutton/stopbutton/volumelever” •console:正常大小的面板 •smallconsole:较小的面板 •playbutton:显示播放按钮 •pausebutton:显示暂停按钮 •stopbutton:显示停止按钮 •volumelever:显示音量调节按钮 hidden:为true时可以隐藏面板 embed标签src后的文件也可以是.swf文件,用来播FLASH 下面是例子:自动播放的并且隐藏控制按钮,禁止右键菜单的. 下面的是上面例子中使用的代码: <embed src="yin/01.mp3" _fcksavedurl=""yin/01.mp3"" _fcksavedurl=""yin/01.mp3"" type="application/x-mplayer3" loop="true" ShowStatusBar="true" ShowPositionControls="false" EnableContextMenu="false"></embed> 下面是real的播放器用法总结,是转贴:
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值