lucifinilhades

浏览: 84743 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 多媒体播放【3】

博客分类：

HTML5/CSS3

HTML5 多媒体播放

video元素和audio元素的方法

play()方法：使用该方法来播放媒体，自动将元素的paused属性值设置为false。
pause()方法：使用该方法来暂停播放，自动将元素的paused属性值设置为true。
load()方法：使用该方法来重新载入媒体进行播放，自动将元素的playbackRate属性值变为defaultPlaybackRate属性的值，自动将元素的error的值变为null。
canPlayType()方法：使用该方法来测试浏览器是否支持指定的媒体类型，该方法定义如下：
var support = mediaElement.canPlayType(type);

mediaElement表示页面上的video或audio元素。该方法使用一个参数type，该参数的指定方法与source元素的type属性相同，都用播放文件的MIME类型来指定，可以在指定的字符串中加上表示媒体编码格式的codes参数。该方法返回三个可能的值：

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

媒体播放示例如下：

$(function() {
	$("video").bind("ended", function(event) {
		alert("播放结束。");
	}).bind("error", function(event) {
		swithc(event.target.code) {
			case MediaError.MEDIA_ERROR_ABORTED:
				alert("视频的下载过程被终止。");
				break;
			case MediaError.MEDIA_ERROR_NETWORK:
				alert("网络发生故障，视频的下载过程被终止。");
				break;
			case MediaError.MEDIA_ERROR_DECODE:
				alert("解码失败。");
				break;
			case MediaError.MEDIA_ERROR_SRC_NOT_SUPPORTED:
				alert("不支持播放的视频格式。");
				break;
			default:
				alert("发生未知错误。");
		}
	});
	$("#playBtn").click(function(event) { $("video")[0].play(); });
	$("#pauseBtn").click(function(event) { $("video")[0].pause(); });
});

示例页面的HTML代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>媒体播放示例</title>
    <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>
    <script type="text/javascript" src="../js/media.js"></script>
</head>
<body>
    <figure>
        <figcaption>媒体播放</figcaption>
        <video src="test.ogv"></video>
    </figure>
    <button type="button" id="playBtn">播放</button>
    <button type="button" id="pauseBtn">暂停</button>
</body>
</html>

video元素和audio元素的事件

loadstart事件：浏览器开始在网上寻找媒体数据。
progress事件：浏览器正在获取媒体数据。
suspend事件：浏览器暂停获取媒体数据，但是下载过程并没有正常结束。
abort事件：浏览器在下载完全部媒体数据之前终止获取媒体数据，但是并不是由错误引起的。
error事件：获取媒体数据过程中出错。
emptied事件：video元素或audio元素所在网络突然变未初始化状态。（可能引起的原因有：1、载入媒体过程中突然发生了一个致使错误；2、在浏览器正在选择支持的播放格式时，又调用了load方法重新载入媒体。）
stalled事件：浏览尝试获取媒体数据失败。
play事件：即将开始播放，当执行了play()方法时触发，或数据下载后元素被设置为autoplay（自动播放属性）。
pause事件：播放暂停，当执行了pause()方法时触发。
loadedmetadata事件：浏览器获取完毕媒体的时间长和字节数。
loadeddata事件：浏览器已加载完毕当前播放位置的媒体数据，准备播放。
waiting事件：播放过程由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧。
playing事件：正在播放。
canplay事件：浏览器能播放媒体，但估计以当前播放速率不能直接将媒体播放完毕，播放期间需要缓冲。
canplaythrough事件：浏览器能够播放媒体，而且以当前播放速率能够将媒体播放完毕，不再需要进行缓冲。
seeking事件：seeking属性变为true，浏览器正在请求数据。
seeked事件：seeking属性变为false，浏览器停止请求数据。
timeupdate事件：当前播放位置被改变，可能是播放过程中的自然改变，也可能是被人为地改变，或由于播放不能连续而发生的跳变。
ended事件：播放结束后停止播放。
ratechange事件：defautplaybackRate属性（默认播放速率）或playbackRate属性（当前播放速率）被改变。
durationchange事件：播放时长被改变。
volumechange事件：volume属性（音量）被改变或muted属性（静音状态）被改变。

分享到：

HTML5 Web Storage | HTML5 多媒体播放【2】

2011-10-23 10:45
浏览 1208
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 多媒体播放【3】

video元素和audio元素的方法

video元素和audio元素的事件

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 多媒体播放【3】

video元素和audio元素的方法

video元素和audio元素的事件

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

HTML5 绘制图形【1】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 跨文档消息传输

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 Web Storage

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 拖放API

HTML5 文件API

最近访客更多访客>>