一、概念
HTML5是HTML的最新版本，它引入了许多新的元素和功能，以适应现代网页开发的需求。以下是HTML5的一些主要特点：
-
新增语义元素：HTML5引入了许多新的语义元素，如
<header>、<footer>、<article>、<section>等，这些元素有助于提高网页的结构化和可访问性。 -
媒体支持：HTML5引入了
<audio>和<video>元素，使得开发者可以在网页上直接嵌入音频和视频内容，而不需要依赖第三方插件。 -
Canvas绘图：HTML5引入了
<canvas>元素，使得开发者可以使用JavaScript在网页上绘制图形和动画。 -
语义化标签：HTML5的语义化标签使得网页的结构更加清晰和易于理解。例如，使用
<nav>元素表示导航链接，使用<article>元素表示独立的内容等。 - 交互性：HTML5提供了更多的API和事件处理程序，使得开发者可以创建更加交互式的网页和应用。例如，拖放功能、文件上传和下载、地理定位等。
- 离线和存储：HTML5提供了离线存储和会话存储功能，使得开发者可以在用户的设备上存储数据，以便在离线时使用。
- 更好的表单控制：HTML5改进了表单元素和输入类型，使得表单的验证和输入更加方便和智能。
HTML5是一个非常强大的工具，它为开发者提供了更多的功能和灵活性，使得他们可以创建出更加丰富、交互性更强、功能更全面的网页和应用。
二、Video
HTML5中的元素可以用来在网页上嵌入视频。下面是一个基本的HTML5视频嵌入的案例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Example</title>
</head>
<body>
<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</body>
</html>
在这个例子中，元素包含了两个元素，分别指定了视频文件的URL和MIME类型。如果浏览器支持其中的一个格式，就会使用该格式的视频文件进行播放。如果浏览器都不支持，则会显示出文字内容"Your browser does not support the video tag."。
另外，还可以通过设置元素的属性来控制视频的宽度、高度和控制条等。在上面的例子中，设置了width和height属性为640和360，表示视频的宽度和高度为640像素和360像素；设置了controls属性表示显示控制条。
注意，视频文件必须存储在服务器上，并且浏览器支持的视频格式可能有所不同，建议同时提供多个格式的视频文件，以便兼容不同的浏览器。
浏览器支持
各个浏览器下<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
视频格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
视频标签
| 标签 | 描述 |
|---|---|
<video> |
定义一个视频 |
<source> |
定义多种媒体资源,比如 <video> 和<audio>
|
<track> |
定义在媒体播放器文本轨迹 |
三、Audio
HTML5中的元素可以用来在网页上嵌入音频。下面是一个基本的HTML5音频嵌入的案例代码：
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio Example</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
在这个例子中，元素包含了两个元素，分别指定了音频文件的URL和MIME类型。如果浏览器支持其中的一个格式，就会使用该格式的音频文件进行播放。如果浏览器都不支持，则会显示出文字内容"Your browser does not support the audio tag."。
与元素类似，可以通过设置元素的属性来控制音频的展示和播放。在上面的例子中，设置了controls属性表示显示控制条。
同样地，音频文件也必须存储在服务器上，并且浏览器支持的音频格式可能有所不同，建议同时提供多个格式的音频文件，以便兼容不同的浏览器。文章来源：https://www.toymoban.com/news/detail-811850.html
浏览器支持
各个浏览器下，<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg文章来源地址https://www.toymoban.com/news/detail-811850.html
| 浏览器 | MP3 | Wav | Ogg |
|---|---|---|---|
| Internet Explorer 9+ | YES | NO | NO |
| Chrome 6+ | YES | YES | YES |
| Firefox 3.6+ | YES | YES | YES |
| Safari 5+ | YES | YES | NO |
| Opera 10+ | YES | YES | YES |
音频格式
| Format | MIME-type |
|---|---|
| MP3 | audio/mpeg |
| Ogg | audio/ogg |
| Wav | audio/wav |
标签
| 标签 | 描述 |
|---|---|
<audio> |
定义了声音内容 |
<source> |
规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用 |
到了这里，关于【温故而知新】HTML5的Video/Audio的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
