html+css 中object标签和audio标签兼容使用

html+css cooljun 2790℃ 0评论

1.因为object只能在IE中使用audio在ie中不兼容,object和audio搭配使用基本可以 解决兼容问题

2.简单的html+css代码
	

<div class="right-audio">
            <div class="audio_btn" id="audio_btn"><span id="time-s">10"</span></div>
            <object style="display:none
" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" class="oO" id="radios">
                <param name="AutoStart" value="0" />
                <param name="FileName" value="http://www.fuguojian.cn/music/Big%20Big%20World.mp3" />
                <audio controls id="photo_audio" style="display:none
" onended="audio_btn.click()" src="http://www.fuguojian.cn/music/Big%20Big%20World.mp3"></audio>
            </object>
 </div>

实际样式:

html+css 中object标签和audio标签兼容使用 - cooljun - cooljun的博客
其中object 和audio使用样式display:none进行隐藏
3.在.audio_btn绑定click事件触发音频播放
		

$(function(){
	$(document).delegate('.audio_btn','click',playRadio)
});
//playRadio的实现
function playRadio(){
	//toggle事件处理
	$(this).toggle(function(i){
		playVoice(this);
        },
        function(i){
        	pauseVoice(this);
        });
    $(this).trigger('click');
}
//playVoice和pauseVoice实现



//播放
function playVoice(_this){
	$(".audio_btn").addClass("audio_btn_on");
	var rd=document.getElementById("radios");
	if(document.all)
		rd.play();
	else
		document.getElementById("photo_audio").play();
}

//暂停
function pauseVoice(_this){
	$(".audio_btn").removeClass("audio_btn_on");
	var rd=document.getElementById("radios");
	if(document.all)
		rd.stop();
	else
		document.getElementById("photo_audio").pause();
}

其中document.all是判断是否是IE浏览器


4.这样基本就完成了音频的播放,如果你想在音频播放完的时候触发事件在audio上有onended可以调用

 

5.object监听播放完毕事件比较麻烦 

在object里添加:<param name=”SendPlayStateChangeEvents” value=”true”>
使用JavaScript监听器,监听MediaPlayer的PlayStateChange()事件,MediaPlayer在

状态改变的时候发生该事件。该事件的添加方法如下:


<script language="JavaScript" for="player" type="text/javascript" event="PlayStateChange(newstate)"> 

   //JavaScript代码 </script>

    newstate即为MediaPlayer的播放状态。

6.object更换音频文件

document.getElementById(“radios”).Filename=url;

转载请注明:cooljun小窝 » html+css 中object标签和audio标签兼容使用

如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)

您必须 登录 才能发表评论!