HTML 媒体

概述

HTML 提供了多种方式来在网页中嵌入和播放多媒体内容，包括音频、视频和其他媒体格式。HTML5 引入了原生的 <audio> 和 <video> 元素，使得在网页中添加媒体内容变得更加简单。

视频

基本视频元素

使用 <video> 标签嵌入视频：

<video src="movie.mp4" controls>
    您的浏览器不支持 video 标签。
</video>

视频属性

<video 
    src="movie.mp4" 
    width="640" 
    height="360"
    controls
    autoplay
    loop
    muted
    poster="thumbnail.jpg">
    您的浏览器不支持 video 标签。
</video>

常用属性：

• controls - 显示播放控件
• autoplay - 自动播放
• loop - 循环播放
• muted - 静音
• poster - 视频封面图
• preload - 预加载策略（none/metadata/auto）
• width 和 height - 视频尺寸

多格式支持

为了兼容不同浏览器，提供多种视频格式：

<video width="640" height="360" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.webm" type="video/webm">
    <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持 video 标签。
</video>

音频

基本音频元素

使用 <audio> 标签嵌入音频：

<audio src="music.mp3" controls>
    您的浏览器不支持 audio 标签。
</audio>

音频属性

<audio 
    src="music.mp3" 
    controls
    autoplay
    loop
    muted
    preload="auto">
    您的浏览器不支持 audio 标签。
</audio>

多格式音频

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

媒体格式

视频格式

格式	MIME 类型	浏览器支持
MP4	video/mp4	广泛支持
WebM	video/webm	Chrome, Firefox, Opera
Ogg	video/ogg	Firefox, Opera

音频格式

格式	MIME 类型	浏览器支持
MP3	audio/mpeg	广泛支持
Ogg	audio/ogg	Firefox, Opera
WAV	audio/wav	广泛支持

嵌入 YouTube 视频

使用 iframe 嵌入 YouTube 视频：

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/VIDEO_ID" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
    allowfullscreen>
</iframe>

响应式媒体

响应式视频

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <video 
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
        controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</div>

CSS 样式

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

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

<div class="video-container">
    <video controls>
        <source src="movie.mp4" type="video/mp4">
    </video>
</div>

JavaScript 控制

视频控制

<video id="myVideo" width="640" height="360">
    <source src="movie.mp4" type="video/mp4">
</video>

<button onclick="playVideo()">播放</button>
<button onclick="pauseVideo()">暂停</button>
<button onclick="changeVolume()">音量</button>

<script>
    var video = document.getElementById("myVideo");
    
    function playVideo() {
        video.play();
    }
    
    function pauseVideo() {
        video.pause();
    }
    
    function changeVolume() {
        video.volume = 0.5; // 50% 音量
    }
</script>

音频控制

<audio id="myAudio">
    <source src="music.mp3" type="audio/mpeg">
</audio>

<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
    var audio = document.getElementById("myAudio");
    
    function playAudio() {
        audio.play();
    }
    
    function pauseAudio() {
        audio.pause();
    }
</script>

媒体事件

常用的媒体事件：

<video id="myVideo" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<script>
    var video = document.getElementById("myVideo");
    
    video.addEventListener("play", function() {
        console.log("视频开始播放");
    });
    
    video.addEventListener("pause", function() {
        console.log("视频暂停");
    });
    
    video.addEventListener("ended", function() {
        console.log("视频播放结束");
    });
    
    video.addEventListener("timeupdate", function() {
        console.log("当前播放时间：" + video.currentTime);
    });
</script>

字幕和轨道

使用 <track> 元素添加字幕：

<video controls>
    <source src="movie.mp4" type="video/mp4">
    <track 
        kind="subtitles" 
        src="subtitles_zh.vtt" 
        srclang="zh" 
        label="中文"
        default>
    <track 
        kind="subtitles" 
        src="subtitles_en.vtt" 
        srclang="en" 
        label="English">
</video>

最佳实践

1. 提供多种格式以确保跨浏览器兼容性
2. 使用 poster 属性为视频提供封面图
3. 避免自动播放，特别是带声音的媒体
4. 优化文件大小以提高加载速度
5. 提供替代内容给不支持的浏览器
6. 使用适当的预加载策略
7. 考虑移动设备的带宽和性能

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML 媒体示例</title>
    <style>
        .media-container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
        }
        
        video, audio {
            width: 100%;
            max-width: 640px;
            display: block;
            margin: 20px 0;
        }
        
        .controls {
            margin: 10px 0;
        }
        
        button {
            padding: 10px 20px;
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="media-container">
        <h1>视频播放器</h1>
        <video id="myVideo" controls poster="thumbnail.jpg">
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.webm" type="video/webm">
            您的浏览器不支持 video 标签。
        </video>
        
        <div class="controls">
            <button onclick="document.getElementById('myVideo').play()">播放</button>
            <button onclick="document.getElementById('myVideo').pause()">暂停</button>
            <button onclick="document.getElementById('myVideo').currentTime = 0">重置</button>
        </div>
        
        <h1>音频播放器</h1>
        <audio controls>
            <source src="music.mp3" type="audio/mpeg">
            <source src="music.ogg" type="audio/ogg">
            您的浏览器不支持 audio 标签。
        </audio>
    </div>
</body>
</html>

总结

HTML5 的媒体元素为网页提供了强大的多媒体支持。通过合理使用 <video> 和 <audio> 标签，结合 JavaScript 和 CSS，可以创建丰富的媒体体验。记住要考虑浏览器兼容性、性能优化和用户体验。