HTML多媒体 - HTML学习网站

HTML多媒体元素概述

HTML5提供了丰富的多媒体支持，主要包括以下元素：

<video> - 用于嵌入视频内容
<audio> - 用于嵌入音频内容
<img> - 用于嵌入图片
<figure> 和 <figcaption> - 用于图片及其说明
<picture> - 用于响应式图片
<source> - 用于指定媒体源
<track> - 用于视频字幕

视频元素详解

HTML5的<video>标签支持多种视频格式和属性：

MP4 (H.264)

最广泛支持的视频格式，适合大多数现代浏览器

WebM

开源视频格式，支持VP8/VP9编码

Ogg

开源容器格式，支持Theora编码

基本用法


<video controls width="250">
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    您的浏览器不支持视频标签。
</video>

常用属性

controls - 显示播放控件
autoplay - 自动播放
loop - 循环播放
muted - 静音播放
poster - 视频封面图片
preload - 预加载设置
width/height - 视频尺寸

效果预览

音频元素详解

HTML5的<audio>标签支持多种音频格式：

MP3

最常用的音频格式，支持广泛

WAV

无损音频格式，文件较大

OGG

开源音频格式，支持Vorbis编码

基本用法


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

效果预览

响应式图片

使用<picture>元素创建响应式图片：


<picture>
    <source media="(min-width: 800px)" srcset="large.jpg">
    <source media="(min-width: 400px)" srcset="medium.jpg">
    <img src="small.jpg" alt="响应式图片">
</picture>

嵌入外部媒体

使用<iframe>嵌入外部媒体内容：


<div class="responsive-media">
    <iframe src="视频URL" allowfullscreen></iframe>
</div>

多媒体最佳实践

提供多种格式的媒体文件以确保兼容性
使用适当的压缩和优化技术
添加适当的alt文本和说明
考虑移动设备的带宽限制
实现延迟加载（lazy loading）
提供替代内容
注意版权问题
考虑可访问性

多媒体API

HTML5提供了丰富的多媒体API，可以控制媒体播放：


// 获取视频元素
const video = document.querySelector('video');

// 播放控制
video.play();
video.pause();

// 属性控制
video.currentTime = 0; // 跳转到开始
video.volume = 0.5;    // 设置音量
video.playbackRate = 1.5; // 设置播放速度

// 事件监听
video.addEventListener('play', () => {
    console.log('视频开始播放');
});

video.addEventListener('ended', () => {
    console.log('视频播放结束');
});