当前位置：首页 > article >正文

HTML（四） -- 多媒体设计

article 2024/9/26 3:19:27

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+ 不支持

格式	文件	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+

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>