HTML5中的视频和音频标签-Toy模板网

这篇具有很好参考价值的文章主要介绍了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>

效果如下：

HTML5中的视频和音频标签,html5,音视频,前端

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

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

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

效果如下：

HTML5中的视频和音频标签,html5,音视频,前端

视频标签 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)。

支持的视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

音频标签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)。此外，还有视频编码支持指南。

其他使用说明：文章来源地址https://www.toymoban.com/news/detail-779378.html

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