HTML5中的视频和音频标签

HTML5中的视频和音频标签是什么？

HTML5中的视频标签是<video>，音频标签是<audio>。这两个标签都是HTML5新增的多媒体标签，用于在网页中嵌入视频和音频。

1、视频标签<video>可以通过以下属性来控制视频的播放：

• src：指定视频文件的URL。
• poster：指定视频封面图的URL。
• width：指定视频的宽度。
• height：指定视频的高度。
• controls：添加控制条，以便用户控制视频播放（没有就无法播放）。

<video src="wallpaper.mp4" poster=".bin" width="1000" height="1000" controls></video>

效果如下：

2、音频标签<audio>可以通过以下属性来控制音频的播放：

• src：指定音频文件的URL。
• preload：指定音频文件是否预加载。
  • auto表示加载音频
  • metadata表示不加载音频，但是需要获取音频元数据（如音频长度）
  • none表示不加载音频。
  • 若指定为空字符串，则等效于auto。
• autoplay：指定音频是否自动播放，音频会尽快自动播放，不会等待整个音频下载完成。
• loop：指定音频是否循环播放（按需要使用）。
• controls：添加控制条，以便用户控制音频播放。

<audio src="“据说真的有神”（Prod.蛋卷） - 木秦.mp3" preload="auto" autoplay controls></audio>

效果如下：

视频标签 video的使用说明

浏览器并不是都支持相同的视频格式 (en-US)，所以你可以在 source (en-US) 元素里提供多个视频源，然后浏览器将会使用它所支持的第一个源。

<video controls>
  <source src="myVideo.mp4" type="video/mp4" />
  <source src="myVideo.webm" type="video/webm" />
  <p>
    Your browser doesn't support HTML5 video. Here is a
    <a href="myVideo.mp4">link to the video</a> instead.
  </p>
</video>

其他的使用注意事项：

• 如果你没有指定 controls 属性，那么视频不会展示浏览器自带的控件，你也可以用 JavaScript 和 HTMLMediaElement API 来创建你自己的控件。详情请见Creating a cross-browser video player (en-US)。
• HTMLMediaElement 会激活许多不同的事件 (en-US)，以便于让你可以控制视频（和音频）内容。
• 你可以用 CSS 属性 object-position 来调整视频在元素内部的位置，它可以控制视频尺寸适应于元素外框的方式。
• 如果想在视频里展示字幕或者标题，你可以在 track元素和 WebVTT 格式的基础上使用 JavaScript 来实现。详情请见 Adding captions and subtitles to HTML5 video (en-US)。

支持的视频格式

音频标签audio的使用说明

浏览器对 文件类型 和 音频编码 (en-US) 的支持各有不同，你可以使用内嵌的 source (en-US) 元素提供不同的播放源。浏览器会使用第一个它支持的播放源：

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg" />
  <source src="myAudio.ogg" type="audio/ogg" />
  <p>
    Your browser doesn't support HTML5 audio. Here is a
    <a href="myAudio.mp4">link to the audio</a> instead.
  </p>
</audio>

mdn web docs网站提供了全面细致的 音频文件类型指南 和 这些类型可以使用的音频编码 (en-US)。此外，还有 视频编码支持指南。

其他使用说明：

• 如果你没有声明 controls 属性，音频播放器不会包含浏览器的默认控件。但你可以使用 JavaScript 和 HTMLMediaElement API 创建自己的自定义控件。
• 为了更精确地控制你的音频内容，HTMLMediaElement 会触发多种不同的 事件 (en-US)。这也提供了一个查看音频获取过程的方式，你可以查看错误或检测什么时候可以开始播放或操作。
• 你还可以使用 Web Audio API 以从 JavaScript 代码直接生成和操纵音频流，而非流式播放已存在的音频文件。
• <audio> 元素不能像 <video> 元素一样附加副标题（subtitle）或说明标题（caption）。更多有用的信息和解决方法参见 Ian Devlin 的 WebVTT and Audio。

支持的音频格式