audio 与 video 元素总结

最新推荐文章于 2024-08-05 09:00:00 发布

小贤笔记

最新推荐文章于 2024-08-05 09:00:00 发布

阅读量76

点赞数

本文链接：https://blog.csdn.net/shenxianhui1995/article/details/142687786

版权

属性

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 将设置当前的播放位置，并且会自动搜寻到媒体的那个位置，如果媒体目前已经被加载的话。如果音频是以流的形式加载的，并且数据超出了媒体的缓冲区(buffer)，user agent 可能无法获取资源的某些部分。另一些音频的时间轴可能并非从 0 秒开始，所以设置 currentTime 到一个开始时间之前的时间可能会失败。举个例子，如果音频媒体的时间轴从 12 小时开始，把 currentTime 设置到 3600 将会尝试把当前播放位置设置到媒体的开始位置之前，从而导致错误。getStartDate() 方法能够用于确定媒体时间轴的开始位置。

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 一样使用。

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
    }
})