属性

audio

autoplay

布尔值属性；声明该属性，音频会尽快自动播放，不会等待整个音频文件下载完成。

备注： 自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。

controls

如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

crossorigin

枚举属性 展示音频资源是否可以通过 CORS 加载。支持 CORS 的资源可以被 <canvas> 元素复用而不污染。可选值如下：

• anonymous
  在发送跨域请求时不携带验证信息。换句话说，浏览器在发送Origin: HTTP 请求首部时将不携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本认证。如果服务器没有给予源站信任（也就是说没有设置 Access-Control-Allow-Origin: 响应首部），那么图片就被认为是污染的，它就会被限制使用。
• use-credentials
  在发送跨域请求时携带验证信息。换句话说，在发送Origin: HTTP 请求首部时将携带 cookie、安全令牌、并且执行 HTTP 基本认证。如果服务器没有给予源站信任（通过设置Access-Control-Allow-Credentials: 响应首部）那么图片就被认为是污染的，它就会被限制使用。在未指定时，资源将不通过 CORS 请求来获取（也就是不发送 Origin:请求首部），以保护 <canvas> 元素中未污染的内容。如果验证失败，它会表现的好像 anonymous 选项是选中的。

currentTime

读取 currentTime 属性将返回一个双精度浮点值，用以标明以秒为单位的当前音频的播放位置。如果音频的元数据暂时无法访问——这意味着你无法的知道媒体的开始或持续时间。这时，currentTime 相对应的，能够被用于改变重播的时间。否则，设置 currentTime 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区（buffer），user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。

duration (只读)

这是一个双精度浮点数，指明了音频在时间轴中的持续时间（总长度），以秒为单位。如果元素上没有媒体，或者媒体是不可用的，那么会返回 NaN。如果媒体找不到确切的结尾（比如不确定长度的直播流，网络电台，或者是通过 WebRTC 连接的流），那么这个值将返回 +Infinity。

loop

布尔属性；如果声明该属性，将循环播放音频。

muted

表示是否静音的布尔值。默认值为 false，表示有声音。

preload

枚举属性，让开发者自行思考来示意浏览器使用何种加载方式以达到最好的用户体验。可以是以下属性之一：

• none: 示意用户可能不会播放该音频，或者服务器希望节省带宽；换句话说，该音频不会被缓存；
• metadata: 示意即使用户可能不会播放该音频，但获取元数据 (例如音频长度) 还是有必要的。
• auto: 示意用户可能会播放音频；换句话说，如果有必要，整个音频都将被加载，即使用户不期望使用。
• 空字符串 : 等效于auto属性。不同浏览器会有自己的默认值，规范建议的默认值为 metadata。

备注： autoplay 属性的优先级高于 preload。如果 autoplay 被指定，浏览器将显式地开始下载媒体以供播放。

src

嵌入的音频的 URL。这是一个可选属性；你可以在 audio 元素中使用 <source> 元素来替代该属性指定嵌入的音频。

video

autoplay

布尔属性；声明该属性后，视频会尽快自动开始播放，不会停下来等待数据全部加载完成。

备注：自动播放音频（或有声视频）可能会破坏用户体验，所以应该尽可能避免。如果你一定要提供自动播放功能，你应该加入开关（让用户主动打开自动播放）。然而，如果需要创建一些媒体元素，其播放源由用户在稍后设置，自动播放就会很有用。想了解如果正确使用自动播放，可参见我们的 自动播放指南。如果使用 autoplay="false" 来关闭视频的自动播放功能，会不起作用；只要 <video> 标签中有 autoplay 属性，视频就会自动播放。要移除自动播放，需要完全删除该属性在某些浏览器（例如 Chrome 70.0）中，如果没有设置 muted 属性，autoplay 将不会生效。

controls

加上这个属性，浏览器会在视频底部提供一个控制面板，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

crossorigin

该枚举属性指明是否使用 CORS（跨域资源共享）来获取相关视频。允许 CORS 的资源 可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：

• anonymous
  在发送跨域请求时不携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将不会携带 cookie、X.509 安全令牌、也不会执行任何 HTTP 基本身份验证。如果服务器没有给予源站点信任（也就是说没有设置 Access-Control-Allow-Origin: HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。
• use-credentials
  在发送跨域请求时携带凭证（credential）信息。也就是说，浏览器在发送 Origin: HTTP 请求首部时将会携带 cookie、安全令牌、并且执行 HTTP 基本身份验证。如果服务器没有给予源站点信任（通过设置 Access-Control-Allow-Credentials: HTTP 响应首部），图像会被 污染，并且它的使用会受到限制。不加这个属性时，获取资源不会使用 CORS 请求（即不会发送 Origin: HTTP 请求首部），保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。

height

视频显示区域的高度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

loop

布尔属性；指定后，会在视频播放结束的时候，自动返回视频开始的地方，继续播放。

muted

布尔属性，指明在视频中音频的默认设置。设置后，音频会初始化为静音。默认值是 false, 意味着视频播放的时候音频也会播放。

playsinline

布尔属性，指明视频将内联（inline）播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

poster

海报帧图片 URL，用于在视频处于下载中的状态时显示。如果未指定该属性，则在视频第一帧可用之前不会显示任何内容，然后将视频的第一帧会作为海报（poster）帧来显示。

preload

该枚举属性旨在提示浏览器，作者认为在播放视频之前，加载哪些内容会达到最佳的用户体验。可能是下列值之一：

• none: 表示不应该预加载视频。
• metadata: 表示仅预先获取视频的元数据（例如长度）。
• auto: 表示可以下载整个视频文件，即使用户不希望使用它。
• 空字符串: 和值为 auto 一致。每个浏览器的默认值都不相同，即使规范建议设置为 metadata。

备注：autoplay 属性的优先级比 preload 高。如果制定了 autopaly 属性，浏览器显然需要开始下载视频以便回放。规范没有强制浏览器去遵循该属性的值，这仅仅只是个提示。

src

要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。

width

视频显示区域的宽度，单位是 CSS 像素（仅限绝对值；不支持百分比）。

事件

事件名称	描述
abort	在播放被终止时触发,例如, 当播放中的视频重新开始播放时会触发这个事件。
canplay	在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发。这个事件对应 CAN_PLAY 的 readyState。
canplaythrough	在媒体的 readyState 变为 CAN_PLAY_THROUGH 时触发，表明媒体可以在保持当前的下载速度的情况下不被中断地播放完毕。
durationchange	元信息已载入或已改变，表明媒体的长度发生了改变。例如，在媒体已被加载足够的长度从而得知总长度时会触发这个事件。
emptied	媒体被清空（初始化）时触发。
ended	播放结束时触发。
error	在发生错误时触发。元素的 error 属性会包含更多信息。
loadeddata	媒体的第一帧已经加载完毕。
loadedmetadata	媒体的元数据已经加载完毕，现在所有的属性包含了它们应有的有效信息。
loadstart	在媒体开始加载时触发。
mozaudioavailable	当音频数据缓存并交给音频层处理时
pause	播放暂停时触发。
play	在媒体回放被暂停后再次开始时触发。即，在一次暂停事件后恢复媒体回放。
playing	在媒体开始播放时触发（不论是初次播放、在暂停后恢复、或是在结束后重新开始）。
progress	告知媒体相关部分的下载进度时周期性地触发。有关媒体当前已下载总计的信息可以在元素的 buffered 属性中获取到。
ratechange	在回放速率变化时触发。
seeked	在跳跃操作完成时触发。
seeking	在跳跃操作开始时触发。
stalled	在尝试获取媒体数据，但数据不可用时触发。
suspend	在媒体资源加载终止时触发，这可能是因为下载已完成或因为其他原因暂停。
timeupdate	元素的 currentTime 属性表示的时间已经改变。
volumechange	在音频音量改变时触发（既可以是 volume 属性改变，也可以是 muted 属性改变）。
waiting	在一个待执行的操作（如回放）因等待另一个操作（如跳跃或下载）被延迟时触发。

例:

let video = document.getElementById('video')

video.addEventListener('playing', e => {
  console.log('playing', e)
})

常见问题解决

隐藏浏览器页面时，直播视频自动暂停，重新打开页面播放进度滞后的问题

当切换浏览器 Tab 页时，直播视频会自动暂停，而再次重新切换回来时尽管仍在播放，但其实已经是延时后的视频。

解决:

// 标签页显示/隐藏事件
document.addEventListener('visibilitychange', function (e) {
    let video = document.getElementById('video')

    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
        // 防止视频延时
    video.currentTime = video.buffered.end(0) - 0.5
    }
})