首页 > web前端 > html/css/css3 > HTML5中audio元素和video元素事件详解
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
07-14

HTML5中audio元素和video元素事件详解

文章目录 [收起]

事 件的处理方式

在利用video元素或audio元素读取或播放媒体数据的时候,会触发一系的事件,如果使用JavaScript脚本来捕捉这些事件,就可以对这些事件进行处理了。对这些事件的捕捉及处理,可以按两种方式来进行。

第一种是监听的方式,使用video元素或audio元素的addEventListener方法来对事件的发生进行监听,该方法的定义如下所示。

videoElement.addEventListener ( type,listener,useCapture);

videoElement表示页面上的video元素或audio元素。type为事件名称,listener表示绑定的函数,useCapture是一个布尔值,表示该事件的响应顺序,该值如果为true,则浏览器采用Capture响应方式,如果为false,浏览器采用bubbing响应方式,一般采用fase,默认情况下也为false,如下使用方法。

video.addEventListener("error",function(){
 /******代码段******/
},false);

第二种事件处理方式为JavaScript脚本常见的获取事件句柄的方式,如下例所示。

<video id="video1" src="test.mov" onplay="begin_playing();"></video>
function begin_playing(){
 /******代码段******/
}

事件介绍

事件 描述
loadstart 浏览器开始在网上寻找媒体数据
progress 浏览器正在获取媒体数据
suspend 浏览器暂停获取媒体数据,但是下载过程并滑正常结束
abort 浏览器在下载完全部媒体数据之前中止获取媒体数据,但是并不是由错误引起的
error 获取媒体数据过程中出错
emptied video元素或audio元素所在网络突然变为未初始化状态可能原因有两个:1.载入媒体过程中突然发生一个致命错误

2.在浏览器正在选择支持的播放格式时,又调用 了load方法重新载入媒体

stalled 浏览器尝试获取媒体数据失败
play 即将开始播放,当执行了play方法时触发,或数据下载后元素被设为autoplay属性
pause 播放暂停,当执行了pause方式时触发
loadedmetadata 浏览器获取完毕媒体的时间长和字节数
waiting 播放过程由于得不到下一帧而暂停播放(例如下一帧尚未加载完毕),但很快就能够得到下一帧
canplay 浏览器能够播放媒体,但估计以当前的播放速率不能直接播放完毕,播放期间需要缓冲
canplaythrough 浏览器能够播放媒体,而且以当前播放速率能够将媒体播放完毕,不再需要进行缓冲
seeking seeking属性变为true,浏览器正在请求数据
seeked seeking属性变为false,浏览器停止请求数据
timeupdate 由于播放位置被改变,可能是播放过程中的自然改变,也可能是被人为的改变,或由于播放不能连续而发生的跳变
ended 播放结束后停止播放
ratechange defaultplaybackRate属性(默认播放速率)或playbackRate属性(当前播放速率)被改变
druationchange 播放时长被改变
volumechange volume属性(音量)被改变或muted属性(静音状态)被改变

事件捕捉示例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>事件捕捉</title>
<script type="text/javascript">
function playOrPauseVideo(){
	var videoUrl = document.getElementById("videoUrl").value;
	var video = document.getElementById("video");
	//使用事件监听方式捕捉事件
	video.addEventListener("timeupdate",function(){
		var timeDisplay = document.getElementById("time");
		//用秒数来显示当前播放进度
		timeDisplay.innerHTML = Math.floor(video.currentTime) + "/" + Math.floor(video.duration) + " 秒";
	},false);
	
	if(video.paused){
		if(videoUrl != video.src){
			video.src = videoUrl;
			video.load();
		}else{
			video.play();
		}
		document.getElementById("playButton").value= "暂停";
	}else{
		video.pause();
		document.getElementById("playButton").value = "播放";
	}
}
</script>
</head>
<body>
 <video id="video" width="400" height="300" autoplay loop="loop"></video>
 <br/>
 视频地址:<input type="text" id="videoUrl"/>
 <input type="button" id="playButton" onClick="playOrPauseVideo()" value="播放"/>
 <span id="time"></span>
</body>
</html>

我们看一个事件捕捉示例,在播放过程中会经常触发timeupdat事件来通知当前的播放位置的改变,在该示例中,我们捕捉这个timeupdate事件来显示当前的播放进度。

进入HTML5多媒体播放video元素与audio元素详解

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*