六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 100|回复: 0

HTML5 多媒体播放【3】

[复制链接]

升级  27.33%

27

主题

27

主题

27

主题

秀才

Rank: 2

积分
91
 楼主| 发表于 2013-1-24 06:39:56 | 显示全部楼层 |阅读模式
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属性(静音状态)被改变。
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表