跳到主要内容

音频与视频

audio 元素有哪些常用属性？​

属性作用
src音频 URL
controls显示自带控制组件
autoplay是否自动播放
loop是否循环播放
muted是否默认静音
preload是否默认缓冲
<audio src="AudioTest.ogg" controls autoplay loop muted preload>
  <p>Your browser does not support the <code>audio</code> element.</p>
</audio>

video 元素比 audio 多了什么？​

  • 共同属性: src、controls、autoplay、loop、muted、preload 语义相同;
  • 新增 poster: 视频封面图 URL;
  • 尺寸: width/height 控制播放器大小;
<video src="myVideo.mp4" width="320" height="240" controls poster="poster.png">
  <p>Your browser does not support the <code>video</code> element.</p>
</video>

不支持该标签时如何给出降级提示？​

  • 写法: 在 audio/video 标签内部写普通 HTML;
  • 行为: 支持播放时内部内容被忽略, 不支持时渲染出来;

多格式兼容的媒体怎么写？​

  • 写法: 在 audio/video 内放多个 source, 每个用 src + type 声明格式;
  • 顺序: 浏览器取第一个它能播放的格式;
  • 兜底: 末尾的 p 在所有格式都不支持时显示;
  • 同源思路见 响应式图片;
<video controls>
  <source src="foo.webm" type="video/webm" />
  <source src="foo.ogg" type="video/ogg" />
  <source src="foo.mov" type="video/quicktime" />
  <p>I'm sorry; your browser doesn't support HTML5 video.</p>
</video>