参考资料

1. HTML 表格表头单元格
2. HTML 用于短的引用
3. HTML 元素语法
4. HTML 多媒体
5. Html转JS有哪些
6. HTML 超链接
7. HTML 音频(Audio)
8. HTML id 属性在 JavaScript 中的使用

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;
}

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。