多媒体：视频与音频

HTML5 直接用标签就能在网页里播放视频和音频，不用再装插件。

视频 <video>

<video controls width="400">
  <source src="movie.mp4" type="video/mp4">
  你的浏览器不支持视频播放。
</video>

• controls：显示播放控件（播放/暂停/进度条）
• width / height：尺寸
• <source>：可放多个不同格式，浏览器挑能播的
• 标签中间的文字：不支持时的备用提示

常用视频属性

属性	作用
controls	显示控件
autoplay	自动播放
muted	静音
loop	循环播放
poster	封面图
preload	预加载方式

音频 <audio>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
  你的浏览器不支持音频播放。
</audio>

属性和视频基本一样（无 poster、无宽高）。

内嵌视频 iframe

要嵌入优酷、B站等外部视频，常用 iframe：

<iframe src="https://player.bilibili.com/player.html?bvid=XXXX"
        width="560" height="315" frameborder="0" allowfullscreen></iframe>

注意事项

• autoplay 在移动端多数浏览器会被拦截，需配合 muted 才可能生效
• 视频文件大，影响加载速度，建议用压缩过、合适的格式
• 外站视频用 iframe 时要看对方是否允许嵌入

注意

不要用 <video> 做背景自动播放却不静音，会严重影响用户体验。