`
lucifinilhades
  • 浏览: 88310 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

HTML5 多媒体播放【3】

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 多媒体播放【2】
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics