多媒体

多媒体概述

多媒体元素（音频、视频）能够丰富网页内容，提供更生动的用户体验。

东巴文（db-w.cn） 认为：多媒体是现代网页的重要组成部分，合理使用可以提升内容的吸引力和互动性。

音频标签

基本语法

<audio src="audio.mp3" controls></audio>

东巴文音频标签属性：

音频示例

<!-- 基本音频 -->
<audio src="music.mp3" controls></audio>

<!-- 带属性的音频 -->
<audio src="music.mp3" controls loop 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>

音频格式

东巴文音频格式对比：

视频标签

基本语法

<video src="video.mp4" controls></video>

东巴文视频标签属性：

视频示例

<!-- 基本视频 -->
<video src="video.mp4" controls></video>

<!-- 带属性的视频 -->
<video src="video.mp4" 
       controls 
       width="640" 
       height="360"
       poster="poster.jpg"
       preload="metadata">
    您的浏览器不支持video标签。
</video>

<!-- 多格式视频 -->
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持video标签。
</video>

视频格式

东巴文视频格式对比：

媒体属性详解

controls属性

显示浏览器默认的媒体控制器：

<!-- ✅ 推荐：显示控制面板 -->
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>

<!-- ❌ 不推荐：无控制面板 -->
<audio src="audio.mp3"></audio>
<video src="video.mp4"></video>

autoplay属性

自动播放媒体（通常需要配合muted）：

<!-- 自动播放（静音） -->
<video src="video.mp4" autoplay muted loop></video>

<!-- 自动播放（有声音，可能被浏览器阻止） -->
<video src="video.mp4" autoplay></video>

东巴文提示：

• 大多数浏览器禁止自动播放有声音的媒体
• 自动播放需配合muted属性
• 建议让用户主动控制播放

loop属性

循环播放媒体：

<!-- 循环播放 -->
<audio src="background-music.mp3" controls loop></audio>
<video src="animation.mp4" autoplay muted loop></video>

muted属性

静音播放：

<!-- 静音播放 -->
<video src="video.mp4" controls muted></video>

<!-- 自动播放必须静音 -->
<video src="video.mp4" autoplay muted></video>

poster属性

视频封面图（仅视频）：

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

preload属性

预加载策略：

<!-- 不预加载 -->
<audio src="audio.mp3" preload="none"></audio>

<!-- 只加载元数据 -->
<audio src="audio.mp3" preload="metadata"></audio>

<!-- 预加载整个文件 -->
<audio src="audio.mp3" preload="auto"></audio>

东巴文preload属性值：

媒体API

JavaScript控制

<audio id="myAudio" src="audio.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

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

常用API方法

东巴文媒体API方法：

常用API属性

东巴文媒体API属性：

媒体事件

东巴文媒体事件：

事件监听示例

<video id="myVideo" src="video.mp4" controls></video>
<div id="status">状态：未开始</div>

<script>
    const video = document.getElementById('myVideo');
    const status = document.getElementById('status');
    
    video.addEventListener('play', function() {
        status.textContent = '状态：播放中';
    });
    
    video.addEventListener('pause', function() {
        status.textContent = '状态：已暂停';
    });
    
    video.addEventListener('ended', function() {
        status.textContent = '状态：播放结束';
    });
    
    video.addEventListener('timeupdate', function() {
        const current = Math.floor(video.currentTime);
        const duration = Math.floor(video.duration);
        status.textContent = `状态：${current}秒 / ${duration}秒`;
    });
</script>

媒体最佳实践

东巴文媒体法则

法则1：提供多种格式

<!-- ✅ 推荐：多格式支持 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <source src="video.ogg" type="video/ogg">
    您的浏览器不支持video标签。
</video>

<!-- ❌ 不推荐：单一格式 -->
<video src="video.mp4" controls></video>

法则2：提供后备内容

<!-- ✅ 推荐：提供后备内容 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <p>您的浏览器不支持HTML5视频。<a href="video.mp4">点击下载</a></p>
</video>

<!-- ❌ 不推荐：无后备内容 -->
<video src="video.mp4" controls></video>

法则3：避免自动播放有声音

<!-- ✅ 推荐：静音自动播放 -->
<video src="video.mp4" autoplay muted loop></video>

<!-- ❌ 不推荐：有声音自动播放（会被浏览器阻止） -->
<video src="video.mp4" autoplay></video>

法则4：提供控制面板

<!-- ✅ 推荐：显示控制面板 -->
<audio src="audio.mp3" controls></audio>
<video src="video.mp4" controls></video>

<!-- ❌ 不推荐：无控制面板 -->
<audio src="audio.mp3"></audio>
<video src="video.mp4"></video>

法则5：优化加载性能

<!-- ✅ 推荐：按需加载 -->
<audio src="audio.mp3" preload="metadata"></audio>

<!-- ✅ 推荐：懒加载视频 -->
<video src="video.mp4" controls preload="metadata"></video>

<!-- ❌ 不推荐：预加载大文件 -->
<video src="large-video.mp4" preload="auto"></video>

可访问性

字幕和字幕

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

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

东巴文track属性：

VTT字幕格式

WEBVTT

00:00:01.000 --> 00:00:04.000
欢迎来到东巴文HTML教程

00:00:05.000 --> 00:00:08.000
今天我们学习多媒体标签

00:00:09.000 --> 00:00:12.000
包括音频和视频的使用

可访问性最佳实践

东巴文可访问性法则：

法则1：提供字幕

<!-- ✅ 推荐：提供字幕 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文字幕" default>
</video>

法则2：提供文字描述

<!-- ✅ 推荐：提供文字描述 -->
<figure>
    <video controls aria-describedby="video-desc">
        <source src="video.mp4" type="video/mp4">
    </video>
    <figcaption id="video-desc">
        该视频演示了如何使用HTML5的video标签嵌入视频。
    </figcaption>
</figure>

法则3：提供控制

<!-- ✅ 推荐：提供播放控制 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
</video>

<!-- ✅ 推荐：自定义控制按钮 -->
<button onclick="video.play()">播放</button>
<button onclick="video.pause()">暂停</button>

学习检验

知识点测试

问题1：以下哪个属性用于显示媒体控制面板？

A. controls B. panel C. interface D. toolbar

答案：A

东巴文解释：controls属性用于显示浏览器默认的媒体控制面板，包括播放、暂停、音量等按钮。HTML中没有panel、interface、toolbar这些属性。

问题2：以下哪个属性可以让视频自动播放？

A. autoplay B. autostart C. play D. start

答案：A

东巴文解释：autoplay属性可以让媒体自动播放。但需要注意，大多数浏览器会阻止有声音的自动播放，需要配合muted属性使用。

实践任务

任务：创建一个包含以下特性的媒体播放页面：

1. 视频播放器（带封面图、控制面板）
2. 音频播放器（带播放列表）
3. 字幕支持
4. 自定义控制按钮

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多媒体播放器 - 东巴文</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        
        h1, h2 {
            color: #333;
        }
        
        .media-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        video, audio {
            width: 100%;
            max-width: 100%;
        }
        
        .controls {
            display: flex;
            gap: 10px;
            margin-top: 15px;
            flex-wrap: wrap;
        }
        
        button {
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            background: #4CAF50;
            color: white;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s;
        }
        
        button:hover {
            background: #45a049;
        }
        
        button:disabled {
            background: #ccc;
            cursor: not-allowed;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e0e0e0;
            border-radius: 4px;
            margin: 10px 0;
            cursor: pointer;
        }
        
        .progress-fill {
            height: 100%;
            background: #4CAF50;
            border-radius: 4px;
            width: 0%;
            transition: width 0.1s;
        }
        
        .playlist {
            list-style: none;
            padding: 0;
            margin: 15px 0;
        }
        
        .playlist li {
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            transition: background 0.3s;
        }
        
        .playlist li:hover {
            background: #f9f9f9;
        }
        
        .playlist li.active {
            background: #e8f5e9;
            font-weight: bold;
        }
        
        .time-display {
            font-family: monospace;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <h1>东巴文多媒体播放器</h1>
    
    <!-- 视频播放器 -->
    <div class="media-container">
        <h2>视频播放器</h2>
        <video id="myVideo" 
               poster="https://via.placeholder.com/800x450.png?text=东巴文视频教程"
               preload="metadata">
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
            <track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文字幕">
            您的浏览器不支持HTML5视频。
        </video>
        
        <div class="progress-bar" onclick="seekVideo(event)">
            <div class="progress-fill" id="videoProgress"></div>
        </div>
        
        <div class="controls">
            <button onclick="playVideo()">播放</button>
            <button onclick="pauseVideo()">暂停</button>
            <button onclick="restartVideo()">重新开始</button>
            <button onclick="toggleMute()">静音/取消静音</button>
            <span class="time-display" id="videoTime">0:00 / 0:00</span>
        </div>
    </div>
    
    <!-- 音频播放器 -->
    <div class="media-container">
        <h2>音频播放器</h2>
        <audio id="myAudio" preload="metadata">
            <source src="https://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
            您的浏览器不支持HTML5音频。
        </audio>
        
        <div class="progress-bar" onclick="seekAudio(event)">
            <div class="progress-fill" id="audioProgress"></div>
        </div>
        
        <div class="controls">
            <button onclick="playAudio()">播放</button>
            <button onclick="pauseAudio()">暂停</button>
            <button onclick="prevAudio()">上一首</button>
            <button onclick="nextAudio()">下一首</button>
            <span class="time-display" id="audioTime">0:00 / 0:00</span>
        </div>
        
        <ul class="playlist" id="playlist">
            <li class="active" data-src="https://www.w3schools.com/html/horse.mp3">
                🎵 示例音频 1
            </li>
            <li data-src="https://www.w3schools.com/html/horse.mp3">
                🎵 示例音频 2
            </li>
            <li data-src="https://www.w3schools.com/html/horse.mp3">
                🎵 示例音频 3
            </li>
        </ul>
    </div>
    
    <footer>
        <small>版权所有 &copy; 2024 东巴文（db-w.cn）</small>
    </footer>
    
    <script>
        // 视频控制
        const video = document.getElementById('myVideo');
        const videoProgress = document.getElementById('videoProgress');
        const videoTime = document.getElementById('videoTime');
        
        function playVideo() {
            video.play();
        }
        
        function pauseVideo() {
            video.pause();
        }
        
        function restartVideo() {
            video.currentTime = 0;
            video.play();
        }
        
        function toggleMute() {
            video.muted = !video.muted;
        }
        
        function seekVideo(e) {
            const rect = e.target.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            video.currentTime = percent * video.duration;
        }
        
        video.addEventListener('timeupdate', function() {
            const percent = (video.currentTime / video.duration) * 100;
            videoProgress.style.width = percent + '%';
            
            const current = formatTime(video.currentTime);
            const duration = formatTime(video.duration);
            videoTime.textContent = `${current} / ${duration}`;
        });
        
        // 音频控制
        const audio = document.getElementById('myAudio');
        const audioProgress = document.getElementById('audioProgress');
        const audioTime = document.getElementById('audioTime');
        const playlist = document.getElementById('playlist');
        let currentIndex = 0;
        
        function playAudio() {
            audio.play();
        }
        
        function pauseAudio() {
            audio.pause();
        }
        
        function prevAudio() {
            currentIndex = (currentIndex - 1 + playlist.children.length) % playlist.children.length;
            loadTrack(currentIndex);
        }
        
        function nextAudio() {
            currentIndex = (currentIndex + 1) % playlist.children.length;
            loadTrack(currentIndex);
        }
        
        function loadTrack(index) {
            const items = playlist.querySelectorAll('li');
            items.forEach((item, i) => {
                item.classList.toggle('active', i === index);
            });
            audio.src = items[index].dataset.src;
            audio.play();
        }
        
        function seekAudio(e) {
            const rect = e.target.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            audio.currentTime = percent * audio.duration;
        }
        
        audio.addEventListener('timeupdate', function() {
            const percent = (audio.currentTime / audio.duration) * 100;
            audioProgress.style.width = percent + '%';
            
            const current = formatTime(audio.currentTime);
            const duration = formatTime(audio.duration);
            audioTime.textContent = `${current} / ${duration}`;
        });
        
        audio.addEventListener('ended', function() {
            nextAudio();
        });
        
        // 播放列表点击
        playlist.addEventListener('click', function(e) {
            if (e.target.tagName === 'LI') {
                const index = Array.from(playlist.children).indexOf(e.target);
                loadTrack(index);
                currentIndex = index;
            }
        });
        
        // 格式化时间
        function formatTime(seconds) {
            if (isNaN(seconds)) return '0:00';
            const mins = Math.floor(seconds / 60);
            const secs = Math.floor(seconds % 60);
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }
    </script>
</body>
</html>

东巴文（db-w.cn） - 让编程学习更有趣、更高效！