HTML Video/Audio DOM 网页上播放影片

应用于网页上播放影片的介面控制。将影片 Video DOM 插入网页及用来网页上播放影片或影音串流。从 HTML5 新增的 <video> 标籤后，可以在网页上直接播放影片格式更容易，且当前常用的浏览器上都可以正常播放，反而需要设置伺服器的 .mp4, .vtt MIME 类型约定例如需要在 IIS 或者 Apache 等 Plesk 服务器系统管理中新增配置才可读取其档案属性。

影片档案上传至合适播放的伺服器

例如 YouTube、Vimeo 等，获取影片的嵌入码、可以让将影片嵌入到网页上。还可以在影片播放器上加入额外的功能，例如调整音量、设置字幕等，以便根据喜好自订影片播放器。

应用于网页上直接播放影片的 Video 影片或是 Audio 物件模型 (Document Object Model) 介面时，需要考量网站流量的因素例如媒体档案的大小和格式，建议选择合适的档案大小和格式，过大或不支援的档案可能会导致加载速度慢或无法播放的问题、预加载和缓冲可以提高媒体播放的流畅度，但也会消耗更多的流量和资源。

Method 方法 / Properties 属性 / Event 事件

Video/Audio Methods 方法

控制 Video/Audio 播放、暂停，附加出现的影片字幕轨道。

Method 方法		Description 描述
load()	加载	重新加载媒体元素
play()	播放	开始播放媒体
pause()	暂停	暂停正在播放的媒体
canPlayType()	可以播放类型	检查浏览器是否可以播放指定的媒体类型
addTextTrack()	添加字幕轨道	向媒体添加新的 Text Track 字幕轨道

Video/Audio Properties 属性

通过 JavaScript 来完成媒体播放控制及读取影片当前资讯。

Property 属性		Description 描述
audioTracks	音频曲目	返回表示可用音轨的 AudioTrackList 对象
autoplay	自动播放	设置或返回媒体，是否应在加载后立即开始播放 {vid.autoplay = true;}
buffered	缓冲	返回表示媒体的缓冲部分的 ▼ TimeRanges 对象
controller	控制器	返回表示媒体当前媒体控制器的 MediaController 对象
controls	控件	设置或返回媒体是否应显示控件（如播放/暂停等）
crossOrigin	跨越原点	设置或返回媒体的 CORS 设置
currentSrc	当前来源	返回当前媒体的 URL
currentTime	当前时间	设置或返回媒体中的当前播放位置（以秒 Seconds 为单位）
defaultMuted	默认静音	设置或返回媒体是否应默认静音 {vid.defaultMuted = true}
defaultPlaybackRate	默认播放速率	设置或返回媒体播放的默认速度 {vid.defaultPlaybackRate = 0.5}
duration	持续时间	返回当前媒体的长度（以秒为单位）
ended	结束	返回媒体的播放是否已结束
loop	循环	设置或返回完成后媒体是否循环新开始 {vid.loop = true}
mediaGroup	媒体集团	设置或返回媒体所属的组（用于链接多个媒体元素）
muted	静音	设置或返回媒体是否静音 {video.muted = (video.muted) ? !1 : !0;}
networkState	网络状态	返回媒体的当前 Network State 网络状态
paused	暂停	返回媒体是否暂停
playbackRate	回放速率	设置或返回媒体播放的速度
played	已经播放	返回表示媒体播放部分的 TimeRanges 对象
preload	预加载	设置或返回页面加载时是否应加载媒体
readyState	准备状态	返回媒体的当前就绪状态
seekable	可搜索	返回表示媒体的可搜索部分的 TimeRanges 对象
seeking	寻求	返回用户当前是否在媒体中寻找
src	来源	设置或返回媒体元素的当前 Source/src 来源
startDate	开始时间日期	返回表示当前时间偏移量的 Date 时间日期对象
textTracks	文字追踪	返回表示可用文本轨道的 TextTrackList 对象 {vid.textTracks.length}
videoTracks	影片轨道	返回表示可用影片轨道的 VideoTrackList 对象
volume	音量	设置或返回媒体的音量

Video/Audio Events 事件

Event 事件		Description 描述
abort	中止	媒体加载中止时触发
canplay	可以播放	当浏览器开始播放媒体时触发
canplaythrough	可以通过播放	当浏览器可以在不停止缓冲的情况下播放媒体时触发
durationchange	时间变化	媒体持续时间改变时触发
emptied	清空	当前播放列表为空时触发
ended	播放结束	当前播放列表结束时触发
error	错误	返回表示媒体错误状态的 ▼ MediaError 对象 {vid.error.code}
loadeddata	加载数据	当浏览器加载媒体的当前帧时触发
loadedmetadata	加载元数据	当浏览器加载媒体的元数据时触发
loadstart	加载启动	浏览器开始查找媒体时触发
pause	暂停	媒体暂停时触发
play	播放	媒体启动或不再暂停时触发
playing	播放	在暂停或停止 Buffering 缓冲后播放媒体时触发
progress	进展	当浏览器正在下载媒体时触发
ratechange	变化率	当媒体的播放速度改变时触发
seeked	寻找	当用户完成 Moving/Skipping 移动影片中的新位置时触发
seeking	寻求	当用户开始移动/跳到媒体中的新位置时触发
stalled	停滞	浏览器尝试获取媒体数据时触发，但数据不可用
suspend	中止/暂停	当浏览器有意不获取媒体数据时触发
timeupdate	时间更新	当前媒体播放位置发生变化时触发
volumechange	音量变化	媒体音量改变时触发
waiting	等待	影片停止时触发，因为它需要缓冲下一帧

TimeRanges

返回无符号长整数的数字，所代影片的时间范围由影片时间范围对象。

TimeRanges.length

var vid = document.GetElementById("video");
var buf = vid.buffered;
var numRanges = buf.length;
if (buf.length == 1) {
  // 只有一个范围
  if (buf.start(0) == 0 && buf.end(0) == vid.duration) {
    // 一个范围从开始和结束开始，在影片结束时，整个事情都会被加载。
  }
}

可以使用元素的属性 seekable 来决定媒体目前能查找的范围。它返回一个 TimeRanges 时间对象。

mediaElement.seekable.start(); // 返回开始时间
mediaElement.seekable.end(); // 返回结束时间

MediaError 错误处理程序、输出错误消息

创建 <video> 元素，为其创建错误处理程序，将该元素的 src 属性设置为要显示在该元素中的影片资源。

var vid = document.createElement("video");
vid.onerror = function() {console.log("Error with media: " + vid.error.code);}
vid.src="//www.zhangleiboke.com/3D-ANIMATION.html";

例如在 iOS 系统下媒体格式不正确则出现 error.code = 4

1 MEDIA_ERR_ABORTED 相关资源的获取被用户请求中止。
2 MEDIA_ERR_NETWORK 发生了某种网络错误，导致媒体无法成功获取，尽管之前已经可用。
3 MEDIA_ERR_DECODE 尽管以前被确定为可用，但尝试解码媒体资源时发生错误，导致错误。
4 MEDIA_ERR_SRC_NOT_SUPPORTED 关联的资源或媒体提供程序对象（如 MediaStream）已被发现不适合。