【温故而知新】HTML5的Video/Audio

文章目录

一、概念
二、Video
- 浏览器支持
- 视频格式
- 视频标签
三、Audio
- 浏览器支持
- 音频格式
- 标签

一、概念

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>