HTML5之多媒体

概览

html5新增了两个关于多媒体的元素:video和audio,前者是用于视频,后者用于音频。而他们使用非常简单

<audio src="xhn.mp3" controls="controls">
	您的浏览器不支持
</audio>
<hr>
<video src="BigBuckBunny_640x360.mp4" height="200" controls="controls">
	您的浏览器不支
</video>

主要是src属性,让它指向资源文件即可,视觉如下:

然而各浏览器对视频编码格式的支持不一致,因此上面的示例在chrome是OK的,但在firefox下却不能正常显示,为了兼容可以通过source元素来为同一个媒体指定多个播放格式和编码方式,浏览器会按照代码的顺序来选择,直到找到支持的格式为止。

<video height="200" controls="controls">
	<source src="BigBuckBunny_640x360.mp4" type="video/mp4"/>
	<source src="BigBuckBunny_640x360.ogv" type='video/ogg; codecs="theora,vorbis"'/>
	您的浏览器不支持
</video>

source元素具有几个属性:

  • src - 媒体的url地址;
  • type - 媒体类型,值是媒体文件的MIME;
  • codecs - 使用的编码格式;

虽然type属性是可选属性,但最好不要省略,否则浏览器会从上到下选择时无法判断是否能播放,而先行加载一段数据!

属性

vidio和audio的属性大致相同,就一块来看看

  • autoplay - 如果出现该属性,则视频在就绪后马上播放。
  • controls - 如果出现该属性,则向用户显示控件,比如播放按钮。
  • height - 设置视频播放器的高度。
  • loop - 如果出现该属性,则当媒介文件完成播放后再次开始播放。
  • preload - 如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。该属性有三个可选的值:none、metadata和auto(默认值),metadata表示只预加载媒体的元数据(媒体字节数、第一帧、播放列表、持续时间等)。
  • src - 要播放的视频的 URL。
  • width - 设置视频播放器的宽度。
  • poster - 这是vidio独有的元素,当视频不可用的时,可以用该属性向用户展示一幅替代的图片。
  • error - 正常情况该属性值为null,一旦出现异常该属性值为一个MediaError对象,该对象的code返回对应的错误状态,错误状态共有4中。
    1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
    2 = MEDIA_ERR_NETWORK - 当下载时发生错误
    3 = MEDIA_ERR_DECODE - 当解码时发生错误
    4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频
  • 更多属性,请参考:http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp

方法

  • addTextTrack() - 向音频/视频添加新的文本轨道
  • canPlayType() - 检测浏览器是否能播放指定的音频/视频类型
  • load() - 重新加载音频/视频元素
  • play() - 开始播放音频/视频
  • pause() - 暂停当前播放的音频/视频

事件

  • audioTracks - 返回表示可用音轨的 AudioTrackList 对象
  • autoplay - 设置或返回是否在加载完成后随即播放音频/视频
  • buffered - 返回表示音频/视频已缓冲部分的 TimeRanges 对象
  • controller - 返回表示音频/视频当前媒体控制器的 MediaController 对象
  • controls - 设置或返回音频/视频是否显示控件(比如播放/暂停等)
  • crossOrigin - 设置或返回音频/视频的 CORS 设置
  • currentSrc - 返回当前音频/视频的 URL
  • currentTime - 设置或返回音频/视频中的当前播放位置(以秒计)
  • defaultMuted - 设置或返回音频/视频默认是否静音
  • defaultPlaybackRate - 设置或返回音频/视频的默认播放速度
  • duration - 返回当前音频/视频的长度(以秒计)
  • ended - 返回音频/视频的播放是否已结束
  • error - 返回表示音频/视频错误状态的 MediaError 对象
  • loop - 设置或返回音频/视频是否应在结束时重新播放
  • mediaGroup - 设置或返回音频/视频所属的组合(用于连接多个音频/视频元素)
  • muted - 设置或返回音频/视频是否静音
  • networkState - 返回音频/视频的当前网络状态
  • paused - 设置或返回音频/视频是否暂停
  • playbackRate - 设置或返回音频/视频播放的速度
  • played - 返回表示音频/视频已播放部分的 TimeRanges 对象
  • preload - 设置或返回音频/视频是否应该在页面加载后进行加载
  • readyState - 返回音频/视频当前的就绪状态
  • seekable - 返回表示音频/视频可寻址部分的 TimeRanges 对象
  • seeking - 返回用户是否正在音频/视频中进行查找
  • src - 设置或返回音频/视频元素的当前来源
  • startDate - 返回表示当前时间偏移的 Date 对象
  • textTracks - 返回表示可用文本轨道的 TextTrackList 对象
  • videoTracks - 返回表示可用视频轨道的 VideoTrackList 对象
  • volume - 设置或返回音频/视频的音量

可以使用两种方式来捕捉这些事件

  1. 监听
    addEventListener(type:String, listener:Function, useCapture:Boolean)
    type:String:事件的类型。
    listener:Function:侦听到事件后处理事件的函数,此函数必须接受 Event 对象作为其唯一的参数,并且不能返回任何结果。
    useCapture:Boolean (default = false):这里牵扯到“事件流”的概念。侦听器在侦听时有三个阶段:捕获阶段、目标阶段和冒泡阶段。顺序为:捕获阶段(根节点到子节点检查是否调用了监听函数)→目标阶段(目标本身)→冒泡阶段(目标本身到根节点)。此处的参数确定侦听器是运行于捕获阶段、目标阶段还是冒泡阶段。 如果将 useCapture 设置为 true,则侦听器只在捕获阶段处理事件,而不在目标或冒泡阶段处理事件。 如果useCapture 为 false,则侦听器只在目标或冒泡阶段处理事件。 要在所有三个阶段都侦听事件,请调用两次 addEventListener,一次将 useCapture 设置为 true,第二次再将useCapture 设置为 false。
  2. 事件句柄
    <video height="200" controls="controls" poster="p.jpg" onPlay="doplay()">
原文地址:https://www.cnblogs.com/zhaiqianfeng/p/4621683.html