视频/音频

事件监听

<video id="eventVideo" src="video.mp4" controls></video>
<div id="status">状态: 等待播放</div>

<script>
const video = document.getElementById('eventVideo');
const status = document.getElementById('status');

video.addEventListener('loadstart', () => {
  status.textContent = '状态: 开始加载';
});

video.addEventListener('canplay', () => {
  status.textContent = '状态: 可以播放';
});

video.addEventListener('play', () => {
  status.textContent = '状态: 播放中';
});

video.addEventListener('pause', () => {
  status.textContent = '状态: 已暂停';
});

video.addEventListener('ended', () => {
  status.textContent = '状态: 播放结束';
});

video.addEventListener('error', (e) => {
  status.textContent = '状态: 加载错误';
});
</script>

进度控制

<video id="progressVideo" src="video.mp4" controls></video>
<div>
  <progress id="progressBar" value="0" max="100">0%</progress>
  <span id="timeDisplay">0:00 / 0:00</span>
</div>

<script>
const video = document.getElementById('progressVideo');
const progressBar = document.getElementById('progressBar');
const timeDisplay = document.getElementById('timeDisplay');

video.addEventListener('timeupdate', () => {
  const percent = (video.currentTime / video.duration) * 100;
  progressBar.value = percent;
  
  const current = formatTime(video.currentTime);
  const total = formatTime(video.duration);
  timeDisplay.textContent = `${current} / ${total}`;
});

function formatTime(seconds) {
  const min = Math.floor(seconds / 60);
  const sec = Math.floor(seconds % 60);
  return `${min}:${sec.toString().padStart(2, '0')}`;
}
</script>

完整案例

自定义视频播放器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>自定义视频播放器</title>
    <style>
        .video-container {
            max-width: 800px;
            margin: 20px auto;
            position: relative;
        }
        
        video {
            width: 100%;
            background: #000;
        }
        
        .controls {
            background: rgba(0,0,0,0.7);
            padding: 10px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        button {
            background: #ff5722;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        
        .progress-container {
            flex: 1;
            background: #555;
            height: 5px;
            border-radius: 2px;
            cursor: pointer;
            position: relative;
        }
        
        .progress-bar {
            background: #ff5722;
            height: 100%;
            border-radius: 2px;
            width: 0%;
        }
        
        .time {
            color: white;
            font-size: 12px;
            min-width: 100px;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="customVideo" poster="poster.jpg">
            <source src="video.mp4" type="video/mp4">
            <source src="video.webm" type="video/webm">
            您的浏览器不支持 HTML5 视频。
        </video>
        
        <div class="controls">
            <button id="playBtn">播放</button>
            <button id="muteBtn">静音</button>
            
            <div class="progress-container" id="progressContainer">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            
            <span class="time" id="timeDisplay">0:00 / 0:00</span>
            <button id="fullscreenBtn">全屏</button>
        </div>
    </div>

    <script>
        const video = document.getElementById('customVideo');
        const playBtn = document.getElementById('playBtn');
        const muteBtn = document.getElementById('muteBtn');
        const progressBar = document.getElementById('progressBar');
        const progressContainer = document.getElementById('progressContainer');
        const timeDisplay = document.getElementById('timeDisplay');
        const fullscreenBtn = document.getElementById('fullscreenBtn');

        // 播放/暂停
        playBtn.addEventListener('click', () => {
            if (video.paused) {
                video.play();
                playBtn.textContent = '暂停';
            } else {
                video.pause();
                playBtn.textContent = '播放';
            }
        });

        // 静音/取消静音
        muteBtn.addEventListener('click', () => {
            video.muted = !video.muted;
            muteBtn.textContent = video.muted ? '取消静音' : '静音';
        });

        // 更新进度条
        video.addEventListener('timeupdate', () => {
            const percent = (video.currentTime / video.duration) * 100;
            progressBar.style.width = percent + '%';
            
            timeDisplay.textContent = 
                formatTime(video.currentTime) + ' / ' + 
                formatTime(video.duration);
        });

        // 点击进度条跳转
        progressContainer.addEventListener('click', (e) => {
            const rect = progressContainer.getBoundingClientRect();
            const percent = (e.clientX - rect.left) / rect.width;
            video.currentTime = percent * video.duration;
        });

        // 全屏
        fullscreenBtn.addEventListener('click', () => {
            if (!document.fullscreenElement) {
                video.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        });

        // 格式化时间
        function formatTime(seconds) {
            const min = Math.floor(seconds / 60);
            const sec = Math.floor(seconds % 60);
            return `${min}:${sec.toString().padStart(2, '0')}`;
        }

        // 视频结束时重置
        video.addEventListener('ended', () => {
            playBtn.textContent = '播放';
        });
    </script>
</body>
</html>

音频播放列表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>音乐播放器</title>
    <style>
        .playlist {
            max-width: 600px;
            margin: 20px auto;
        }
        
        .track {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }
        
        .track:hover {
            background: #f5f5f5;
        }
        
        .track.active {
            background: #e3f2fd;
        }
        
        .play-btn {
            margin-right: 10px;
            background: none;
            border: none;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="playlist">
        <h2>我的播放列表</h2>
        
        <audio id="audioPlayer"></audio>
        
        <div class="track" data-src="song1.mp3">
            <button class="play-btn">▶</button>
            <span>歌曲一 - 艺术家一</span>
        </div>
        
        <div class="track" data-src="song2.mp3">
            <button class="play-btn">▶</button>
            <span>歌曲二 - 艺术家二</span>
        </div>
        
        <div class="track" data-src="song3.mp3">
            <button class="play-btn">▶</button>
            <span>歌曲三 - 艺术家三</span>
        </div>
    </div>

    <script>
        const audioPlayer = document.getElementById('audioPlayer');
        const tracks = document.querySelectorAll('.track');
        let currentTrack = null;

        tracks.forEach(track => {
            track.addEventListener('click', () => {
                const src = track.getAttribute('data-src');
                
                // 如果点击的是当前正在播放的歌曲，暂停
                if (currentTrack === track && !audioPlayer.paused) {
                    audioPlayer.pause();
                    track.querySelector('.play-btn').textContent = '▶';
                    return;
                }
                
                // 移除其他歌曲的激活状态
                tracks.forEach(t => {
                    t.classList.remove('active');
                    t.querySelector('.play-btn').textContent = '▶';
                });
                
                // 设置当前歌曲
                track.classList.add('active');
                audioPlayer.src = src;
                audioPlayer.play();
                track.querySelector('.play-btn').textContent = '❚❚';
                currentTrack = track;
            });
        });

        // 歌曲结束时重置
        audioPlayer.addEventListener('ended', () => {
            if (currentTrack) {
                currentTrack.querySelector('.play-btn').textContent = '▶';
                currentTrack.classList.remove('active');
            }
        });
    </script>
</body>
</html>

最佳实践

1. 提供多格式支持 - 确保跨浏览器兼容
2. 添加备用内容 - 为不支持 HTML5 的浏览器提供备选方案
3. 使用合适的预加载策略 - 平衡性能和用户体验
4. 考虑移动端 - 使用 playsinline 属性
5. 提供字幕和描述 - 使用 元素增强可访问性
6. 优化文件大小 - 压缩视频和音频文件
7. 处理错误 - 监听 error 事件并提供友好的错误信息