HTML（四） -- 多媒体设计

目录

1.  视频标签

2.  音频标签

3.  资源标签（定义媒介资源 ）

---

1.  视频标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	表示添加标准的视频控制界面，包括播放、暂停、快进、音量等控制按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
src	URL	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。
muted	muted	静音播放视频。
preload	auto、metadata、none	预加载视频。可选值为 none（不缓存），auto（自动缓存），metadata（仅缓存音频元数据）。
currentTime		获取或设置当前视频的播放时间。
volume		获取或设置视频的音量大小，范围是 0 到 1。
playbackRate		获取或设置视频的播放速率，1 表示正常播放速度，大于 1 表示加速播放，小于 1 表示减速播放。

代码演示：

<video controls autoplay height="400px" width="600px"><source src="../video/壁纸1.mp4" type="video/mp4">
</video>

结果展示：

小提示：

主流浏览器支持的视频格式：

格式	文件	IE	Firefox	Opera	Chrome	Safari
Ogg	.ogg	不支持	3.5+	10.5+	5.0+	不支持
MPEG-4	.mp4	9.0+	不支持	不支持	5.0+	3.0+
WebM	.webm	不支持	4.0+	10.6+	6.0+	不支持

2.  音频标签

代码演示：

<audio controls="controls"><source src="music/music.ogg" type="audio/ogg"><source src="music/music.mp3" type="audio/mp3">Your browser does not support the audio element.
</audio>

小提示：

主流浏览器支持的音频格式：

IE	Firefox	Opera	Chrome	Safari
Ogg	不支持	3.5+	10.5+	3.0+	不支持
MP3	9.0+	不支持	不支持	3.0+	3.0+
WAV	不支持	4.0+	10.6+	不支持	3.0+

3.  资源标签（定义媒介资源 ）

以下是 HTML source 标签各种属性的使用案例：

3.1  src 属性的使用：

<video controls><source src="myvideo.mp4" type="video/mp4"><source src="myvideo.webm" type="video/webm">
</video>

这个例子中，我们在 video 标签中使用了两个 source 标签，用于指定两种不同格式的视频文件。src 属性则指定了媒体文件的路径和文件名。

3.2  type 属性的使用：

<video controls><source src="myvideo.mp4" type="video/mp4"><source src="myvideo.webm" type="video/webm">
</video>

type 属性指定了媒体文件的 MIME 类型，以便浏览器正确解析文件。在这个例子中，两个 source 标签分别指定了 MP4 和 WebM 两种视频文件格式的 MIME 类型。

3.3  media 属性的使用：

<video controls><source src="myvideo.mp4" media="(max-width: 480px)" type="video/mp4"><source src="myvideo-720p.mp4" media="(min-width: 481px)" type="video/mp4">
</video>

media 属性指定了在何种媒体设备或条件下使用该媒体文件。在这个例子中，两个 source 标签使用了不同的 media 属性，分别在不同的屏幕宽度条件下选择不同的视频文件。

3.4  sizes 属性的使用：

<video controls><source src="myvideo-320p.mp4" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw" type="video/mp4"><source src="myvideo-720p.mp4" sizes="(min-width: 1025px) 50vw, 25vw" type="video/mp4">
</video>

sizes 属性指定了媒体文件在不同屏幕尺寸下的适配大小。在这个例子中，两个 source 标签使用了不同的 sizes 属性，根据不同的屏幕宽度选择不同的媒体文件。

3.5  srcset 属性的使用：

<video controls><source srcset="myvideo-320p.mp4 320w, myvideo-720p.mp4 720w" type="video/mp4"><source srcset="myvideo-320p.webm 320w, myvideo-720p.webm 720w" type="video/webm">
</video>

srcset 属性指定了备选媒体文件列表，在不同分辨率或网络速度情况下进行选择。在这个例子中，两个 source 标签分别指定了 MP4 和 WebM 两种格式的备选媒体文件列表。根据浏览器当前的分辨率和网络状况，会自动选择合适的备选媒体文件。

 继续学习之路：

HTML（一） -- 基本标签

HTML（二） -- 表格设计

HTML（三） -- 表单设计

HTML（四） -- 多媒体设计

  如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！