H5中，audio和video标签属性的详细介绍

Freedom_954

于 2024-12-14 12:19:13 发布

阅读量5.1k

点赞数 39

文章标签： git

本文链接：https://blog.csdn.net/Freedom_954/article/details/144468232

版权

<audio> 和 <video> 标签是 HTML5 中用于嵌入音频和视频内容的元素，它们为网页提供了原生的多媒体支持，允许用户在不依赖第三方插件的情况下直接播放音频和视频文件。

1. <audio> 标签

<audio> 标签用于在网页中嵌入音频文件，支持多种格式，如 MP3、OGG 和 WAV 等。它可以让用户直接在浏览器中播放音频，而不需要外部插件或 Flash。

语法：

html

<audio src="audiofile.mp3" controls> Your browser does not support the audio element. </audio>

属性：

src:

音频文件的路径。可以是本地文件，也可以是远程 URL。

controls:

如果添加此属性，会在音频控件中显示播放、暂停、音量等控制按钮。

autoplay:

指示音频在页面加载时自动播放。

loop:

音频播放完毕后自动重新开始播放。

muted:

默认情况下将音频静音。

preload:

定义浏览器在页面加载时预加载音频的行为。可以设置为以下值：

auto：

浏览器将在页面加载时预加载音频。

metadata：

只预加载音频的元数据（如时长、封面等）。

none：

不预加载音频。

controlsList:

定义在 <audio> 控件中要显示或隐藏的控制选项（例如音量、全屏、播放等）。

html

<audio controls controlsList="nodownload noremoteplayback">

<source src="audiofile.mp3" type="audio/mp3">

Your browser does not support the audio element. </audio>

示例：

html

<audio controls>

<source src="audio.mp3" type="audio/mp3">

<source src="audio.ogg" type="audio/ogg">

Your browser does not support the audio element. </audio>

常见用途：

嵌入背景音乐。

播放语音信息或讲座。

播放音效。

2. <video> 标签

<video> 标签用于在网页中嵌入视频文件，支持多种视频格式，如 MP4、WebM 和 Ogg 等。它为用户提供了类似音频播放的功能，同时也可以嵌入视频控制条。

语法：

html

<video src="videofile.mp4" controls>

Your browser does not support the video element. </video>

属性：

src:

视频文件的路径，可以是本地文件或远程 URL。

controls:

显示视频控件（播放、暂停、音量控制、全屏按钮等）。

autoplay:

页面加载时自动播放视频。

loop:

视频播放完毕后自动重新播放。

muted:

默认为静音模式播放视频。

poster:

用于在视频加载之前显示的预览图片（封面图）。

preload:

定义浏览器在页面加载时预加载视频的行为。值与 <audio> 标签相同：

auto：

自动加载视频。

metadata：

只加载视频的元数据。

none：

不加载视频。

width 和 height: 设置视频的显示尺寸。

html

<video width="600" height="400" controls>

<source src="video.mp4" type="video/mp4">

<source src="video.webm" type="video/webm">

Your browser does not support the video element. </video>

示例：

html

<video controls poster="poster.jpg">

<source src="video.mp4" type="video/mp4">

<source src="video.ogg" type="video/ogg">

Your browser does not support the video element. </video>

常见用途：

嵌入教程、教学视频。

播放电影预告片、广告视频等。

实现视频背景或背景幻灯片。

3. source 元素

<source> 元素用于为 <audio> 和 <video> 标签提供多个格式的文件，以便浏览器选择最适合的格式进行播放。这是因为不同浏览器对不同格式的支持程度不同。

示例：

html

<video controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.webm" type="video/webm">

<source src="movie.ogv" type="video/ogg">

Your browser does not support the video element. </video>

4. 跨浏览器支持

虽然现代浏览器（如 Chrome、Firefox、Safari、Edge 等）都支持 <audio> 和 <video> 标签，但它们对文件格式的支持程度不同。以下是常见格式的浏览器支持情况：

MP3：广泛支持。

OGG：Firefox 和 Chrome 支持，但 Safari 和 Internet Explorer 不支持。

WAV：仅限于某些浏览器，如 Chrome 和 Firefox。

MP4：几乎所有浏览器都支持，尤其是对 H.264 编解码格式的支持。

5. 事件监听

<audio> 和 <video> 标签支持常见的 JavaScript 事件，可以用来控制和响应媒体的状态变化。例如：

play：当音频或视频开始播放时触发。

pause：当音频或视频暂停时触发。

ended：当音频或视频播放结束时触发。

timeupdate：当播放进度发生变化时触发。

示例：

html

<video id="myVideo" controls>

<source src="movie.mp4" type="video/mp4">

<source src="movie.webm" type="video/webm">

Your browser does not support the video element. </video>

<script>

var video = document.getElementById("myVideo");

video.onplay = function()

{ console.log("Video is playing"); };

video.onpause = function()

{ console.log("Video is paused"); };

</script>