视频和音频标签

HTML5 未出来之前，在线的音频和视频都是借助 Flash 或者第三方工具实现的，现在 HTML5 也支持了这方面的功能。在一个支持 HTML5 的浏览器中，不需要安装任何插件就能播放音频和视频。

视频

Video 标签定义视频，比如电影片段或其他视频流

<video src="movie.mp4" controls>您的浏览器不支持 video 标签。</video>

属性	描述
src	要播放的视频的URL
autoplay	自动播放
controls	显示控件,比如播放按钮
loop	循环播放
muted	输出被静音
preload	页面加载的时候,自动预加载资源
height	设置播放器高度
width	设置播放器宽度
poster	视频封面

音频

Audio 标签定义声音，比如音乐或其他音频流

<audio src="someaudio.mp3">您的浏览器不支持 audio 标签。</audio>

属性	描述
src	要播放的音频的URL
autoplay	自动播放
controls	显示控件,比如播放按钮
loop	循环播放
muted	输出被静音
preload	页面加载的时候,自动预加载资源

source 标签

<source>标签为媒介元素（比如 <video>和 <audio>）定义媒介资源。

<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择

<audio controls>
  <source src="horse.ogg" />
  <source src="horse.mp3" />
  你的浏览器不支持此标签
</audio>

效果展示

<audio controls>
  <source src="/mp3/2.mp3" />
  你的浏览器不支持此标签
</audio>
<video controls width="100%">
  <source
    src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/97ac2dcc1367e03ac580204d6ca9a724.mp4"
  />
  您的浏览器不支持 audio 标签。
</video>

随堂训练

轻松一刻 🎧

音乐

音乐

视频教程 🎥

A video

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。