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

HTML5中audio元素和video元素方法详解

文章目录 [收起]

video元素与audio元素都具有以下四种方法,play方法,pause方法,load方法,canPlayType方法。下面就来详细了解一下。

play方法

使用play方法来播放媒体,自动将元素的paused属性变为false。

pause方法

使用pause方法来暂停播放,自动将元素的paused属性变为true。

load方法

使用load方法来重新载入媒体进行播放,自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值,自动将元素的error的值变为null.

下面先来看一个媒体播放的示例。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>video test</title>
<script type="text/javascript">
var video;
function init(){
	video = document.getElementById("video1");
	//监听视频播放结束事件
	video.addEventListener("ended",function(){
		alert("播放结束。");
	},true);
	//发生错误
	video.addEventListener("error",function(){
	switch(video.error.code){
	    case MediaError.Media_ERROR_ABORTED:
                 alert("视频的下载过程被中止。");
                 break;
            case MediaError.MEDIA_ERR_NETWORK:
                 alert("网络发生故障,视频的下载过程被中止。");
                 break;
            case MediaError.MEDIA_ERR_DECODE:
                 alert("解码失败。");
                 break;
            case MediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
                 alert("不支持播放的视频格式。");
                 break;
		}
	},false);
}

function play(){
	//播放视频
	video.play();
}

function pause(){
	//暂停视频
	video.pause();
}
</script>
</head>
<body onLoad="init()">
 <!--可以添加controls属性来显示浏览器自带的播放控制条-->
 <video id="video1" src="test.gov"></video>
 <br/>
 <button onClick="play()">播放</button>
 <button onClick="pause()">暂停</button>
</body>
</html>

canPlayType方法

使用canPlayType方法来测试浏览器是否支持指定的媒体类型,该方法定义如下所示。

var support = vodeElement.canPlayType(type);

videoElement表示页面上的video元素或者audio元素,该方法使用一个参数type,该参数的指定方法与soruce元素的type参数相同,都用播放文件的MIME类型来指定,可以在指定的字符串中加上表示媒体编码格式的codes参数。

该方法返回3个可能值:

  • 空字符串:表示浏览器不支持此种媒体类型。
  • maybe:表示浏览器可能支持此种媒体类型。
  • probably:表示浏览器确定支持此种媒体类型。

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

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

留下一个回复

你的email不会被公开。

*