HTML5中video元素方法详解

最新推荐文章于 2024-06-12 15:33:32 发布

我家小宝_朱朱

最新推荐文章于 2024-06-12 15:33:32 发布

阅读量3.8k

点赞数

分类专栏： html5-video

html5-video 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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：表示浏览器确定支持此种媒体类型。

我家小宝_朱朱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5中video元素方法详解

play方法使用play方法来播放媒体，自动将元素的paused属性变为false。pause方法使用pause方法来暂停播放，自动将元素的paused属性变为true。load方法使用load方法来重新载入媒体进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值，自动将元素的error的值变为n
复制链接

扫一扫

专栏目录