html5视频播放器做多清晰度切换（画质切换）_调整网页视频清晰度的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/suny2020/article/details/149027347

html5视频播放器做多清晰度切换（画质切换）

HTML5视频播放器实现多清晰度切换功能，可通过两种方式：自动调整画质，或手动切换不同分辨率MP4文件。实现步骤包括：保存当前播放状态，切换视频源地址，重新加载并恢复播放时间。代码示例展示了如何通过JavaScript监听画质选择事件，动态修改<video>元素src属性，并在加载完成后恢复播放。该功能适用于需要提供多种视频质量选择的场景，如在线教育、付费课程等平台。

演示实例：多清晰度切换/画质切换

画质切换

在 HTML5 视频播放器中实现画质切换，主要依赖于视频文件的不同分辨率版本以及 JavaScript 来控制 <video> 元素的视频源。这通常适用于以下场景：

自适应流媒体 (Adaptive Bitrate Streaming, ABR)：如 HLS (HTTP Live Streaming) 或 DASH (Dynamic Adaptive Streaming over HTTP)。这是最常用也是最推荐的方式，播放器会根据网络状况自动选择最佳画质，但也可以提供手动切换选项。
多源手动切换：为同一视频准备多个不同分辨率的 MP4 文件，然后通过 JavaScript 来切换 <source> 标签的 src。
监听用户画质选择事件。
获取当前视频播放时间 (currentTime) 和播放状态 (paused)。
更新 <video> 元素的 src 属性（或 <source> 标签的 src 属性）指向新画质的视频文件。
调用 video.load() 方法重新加载视频。
将视频的 currentTime 设置回之前保存的时间点。
根据之前的播放状态决定是否自动播放 (video.play())。

效果：

以下为视频多清晰度切换/画质切换功能应用，视频观看效果的截图：

多清晰度切换/画质切换_保利威

多清晰度切换/画质切换(右下方切换按钮支持标清/高清/超清切换)

多清晰度切换/画质切换_保利威

多清晰度切换/画质切换(右下方切换按钮支持标清/高清/超清切换)

实现步骤和代码示例

html5代码参考

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5 视频画质切换</title>
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
            margin-top: 50px;
        }
        video {
            width: 80%;
            max-width: 800px;
            display: block;
            margin: 20px auto;
            background-color: #000; /* 防止加载时闪烁 */
        }
        .controls {
            margin-bottom: 20px;
        }
        select {
            padding: 8px;
            font-size: 16px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>我的视频播放器</h1>

    <div class="controls">
        <label for="quality-select">选择画质：</label>
        <select id="quality-select">
            <option value="240p" data-src="video-240p.mp4">流畅 (240p)</option>
            <option value="480p" data-src="video-480p.mp4">标清 (480p)</option>
            <option value="720p" data-src="video-720p.mp4" selected>高清 (720p)</option>
            <option value="1080p" data-src="video-1080p.mp4">超清 (1080p)</option>
        </select>
    </div>

    <video id="myVideo" controls>
        <source src="video-720p.mp4" type="video/mp4">
        您的浏览器不支持 HTML5 视频。
    </video>

    <script src="video-quality-switcher.js"></script>
</body>
</html>

JS代码

document.addEventListener('DOMContentLoaded', () => {
    const video = document.getElementById('myVideo');
    const qualitySelect = document.getElementById('quality-select');

    // 监听画质选择框的变化
    qualitySelect.addEventListener('change', (event) => {
        const selectedOption = event.target.selectedOptions[0];
        const newVideoSrc = selectedOption.dataset.src; // 获取 data-src 中存储的视频路径

        // 1. 保存当前播放状态和时间
        const currentTime = video.currentTime;
        const isPaused = video.paused;

        // 2. 切换视频源
        // 直接设置 video.src 会更简洁，它会自动移除旧的 <source> 元素并创建新的
        video.src = newVideoSrc;
        
        // 3. 重新加载视频
        video.load(); // 重新加载视频，以便应用新的 src

        // 4. 等待视频元数据加载完成，然后恢复播放
        // 'loadeddata' 事件表示当前帧的数据已加载，可以开始播放
        video.addEventListener('loadeddata', () => {
            video.currentTime = currentTime; // 设置回之前的播放时间
            if (!isPaused) {
                video.play().catch(error => {
                    console.error("视频自动播放失败:", error);
                    // 某些浏览器可能阻止没有用户交互的自动播放
                    // 可以在这里提示用户点击播放按钮
                });
            }
            console.log(`画质切换到：${selectedOption.textContent}，并从 ${currentTime.toFixed(2)} 秒处恢复。`);
        }, { once: true }); // 使用 { once: true } 确保事件只触发一次
    });

    // 初始加载时，如果视频有预设的 src，可以打印一下
    console.log(`当前加载的视频源：${video.src}`);
});

video.src = newVideoSrc: 这是最关键的一步，直接修改 <video> 元素的 src 属性。当 src 改变时，浏览器会准备加载新的视频。
video.load(): 强制浏览器重新加载视频资源。在修改 src 后必须调用此方法。
loadeddata 事件: 当视频的当前播放位置的数据（例如，视频第一帧的图像和音频数据）已经加载完成时触发。在此之后，可以安全地设置 currentTime 并尝试播放。