HTML5：音频和视频

荷包蛋卷
2,286 阅读4分钟

Audio 音频

HTML <audio> 元素用于在文档中嵌入音频内容，可以包含一个或多个音频资源。有两种添加音频资源的方式：

  • src 属性，添加了嵌入媒体的路径，比如 <audio src="audio.mp3">
  • <source> 元素，指定多个媒体资源，用于以不同浏览器支持的多种格式提供相同的媒体内容： 
    <source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />

支持的音频格式

格式MIME-type
MP3audio/mpeg
Oggaudio/ogg
Wavaudio/wav

其他的属性：

  • autoplay，布尔属性，允许音频尽快地自动播放，不会等待整个音频文件下载完成。

    注意： 自动播放可能会破坏用户体验，慎用。

  • controls，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。 01.png

  • loop，布尔属性，是否循环播放音频。

  • muted，是否静音，默认是 false，表示有声音。

  • preload，示意浏览器使用何种加载方式，该属性只是一个建议与提示，浏览器也可能不遵循。

    • none，该音频不会被缓存（用户可能不会播放该音频，或者服务器希望节省带宽）。

    • metadata，只获取获取元数据 (例如音频长度)。

    • auto，音频会被全部加载。

    注意：autoplay 属性的优先级高于 preload。只要 autoplay 被指定，浏览器就会显式地开始下载媒体以供播放。

  • currentTime，当前音频的播放位置（以秒为单位）

  • duration 只读，音频在时间轴中的持续时间（总长度），以秒为单位。

    • 音频不存在，返回 NaN
    • 音频无确定结尾，返回 +Infinity

  • crossorigin，是否可以通过 CORS 加载（支持 CORS 的资源 可以被 <canvas> 元素复用而不污染）。

    • anonymous，默认，在发送跨域请求时不携带验证信息。
    • use-credentials，在发送跨域请求时携带验证信息。

Video 视频

HTML <video> 元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。同样支持多个视频源（由多个 <source> 元素提供），浏览器将会使用它所支持的第一个源。

<video>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <!-- 针对浏览器不支持此元素时候的降级处理。👇 -->
  <p>Your browser doesn't support HTML5 video.</p>
</video>

支持的视频格式

格式MIME-type
MP4video/mp4
WebMvideo/webm
Oggvideo/ogg

与 audio 相同的属性

  • autoplay
  • controls
  • loop
  • muted
  • currentTime
  • duration 只读
  • crossorigin
  • preload
  • src

其他的属性

  • height / width，设置视频播放器的高度 / 宽度。
  • buffered，这个属性可以读取到哪段时间范围内的媒体被缓存了。
  • playsinline，布尔属性，表示在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。
  • played，指明了视频已经播放的所有范围。
  • poster，指定了视频正在下载时显示的图像，直到用户点击播放按钮。

Audio/Video 方法

方法名描述
load()重新加载音频/视频元素
play()开始播放音频/视频
pause()暂停当前播放的音频/视频

Audio/Video 事件

事件名描述
loadstart开始加载数据
progress正在获取数据
suspend在获取数据的过程中（已开始，未完成），暂停获取动作
abort在获取数据的过程中（已开始，未完成），终止获取动作（但是并不是由错误引起的）
error获取数据过程中出错
abort在获取媒体数据的过程中（已开始，未完成），终止获取动作
stalled尝试获取媒体数据失败
canplay能够开始播放但可能因缓冲而需要停止
canplaythrough能够无需因缓冲而停止即可播放至结尾
durationchangeduration 属性发生了变化。
emptied媒体置空。比如在已经加载（或部分加载）的情况下调用 load() 方法，或网络错误、加载错误等
loadeddata媒体的第一帧加载完成。
loadedmetadata元数据加载完成（比如，时间长和字节数）。
pause播放暂停。执行了 pause()。
play即将播放开始。执行了 play()，或设置了 autoplay 属性。
waiting由于得不到下一帧而暂停播放（例如下一帧尚未加载完毕），但很快就能够得到下一帧。
ended播放到媒体的结束位置，而播放停止。
seekingseeking 属性变为 true，浏览器正在请求数据
seekedseeking 属性变为 false，浏览器停止请求数据
timeupdate播放位置改变，可能是播放过程中的自然改变，或是被人为的改变，或由于播放不能连续而发生的跳变等
ratechangedefaultplaybackRate 属性（默认播放速率）或 playbackRate 属性（当前播放速率）被改变
volumechangevolume 属性（音量）被改变或 muted 属性（静音状态）被改变

HTML5 系列

avatar
文章
阅读
粉丝