HTML 多媒体

HTML 多媒体格式化

简介

HTML 多媒体格式化涉及在网页中嵌入和控制音频、视频等多媒体内容的显示方式。

主要标签

<audio> 标签

• 功能：嵌入音频内容

• 属性：

• controls：显示播放控件

• autoplay：自动播放

• loop：循环播放

• muted：静音

• preload：预加载设置

<video> 标签

• 功能：嵌入视频内容

• 属性：

• width/height：设置尺寸

• poster：视频封面图

• 包含所有<audio>的属性

<source> 标签

• 功能：为媒体元素指定多个源文件

• 属性：

• src：媒体文件路径

• type：媒体类型

<track> 标签

• 功能：为媒体指定字幕/说明

• 属性：

• kind：文本轨道类型

• src：轨道文件路径

• srclang：语言代码

用法示例

音频示例

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
  您的浏览器不支持音频元素
</audio>

视频示例

<video width="320" height="240" controls poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  您的浏览器不支持视频元素
</video>

CSS 扩展

常用样式属性

/* 基础样式 */
audio, video {
  display: block;
  margin: 10px auto;
  background: #000;
}

/* 自定义控件样式 */
audio::-webkit-media-controls-panel,
video::-webkit-media-controls-panel {
  background-color: #333;
}

/* 进度条样式 */
audio::-webkit-media-controls-timeline,
video::-webkit-media-controls-timeline {
  background-color: #666;
}

/* 全屏样式 */
video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

响应式视频

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

自定义播放按钮

.custom-player {
  position: relative;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background: rgba(0,0,0,0.5);
  border-radius: 50%;
  cursor: pointer;
}

.play-btn::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 15px;
  border: 10px solid transparent;
  border-left: 15px solid white;
}