怎么在网页中实现自动调整视频的清晰度

2024 年 9 月 11 日约 2 分钟

HTTP Live Streaming (HLS) 是 Apple 开发的一种流媒体协议。能够根据用户的网络状况自动调整视频的清晰度。它将整个视频分成一系列小的 HTTP 文件，每个文件包含一小段视频内容。这种方式可以让视频在不同的网络环境下更加流畅地播放。

本文们将介绍如何在网页中使用实现基于 HLS 视频播放，并显示当前播放的分辨率。

使用 FFmpeg 生成 HLS 视频流

转码视频为多码率版本

使用 FFmpeg 命令行工具将原始视 input.mp4 频转码为多个分辨率（1080p、720p、480p）的 HLS 视频：

ffmpeg -i input.mp4 \
    -filter_complex \
    "[0:v]split=3[v1][v2][v3]; \
     [v1]scale=1920:1080[v1out]; \
     [v2]scale=1280:720[v2out]; \
     [v3]scale=854:480[v3out]" \
    -map "[v1out]" -map 0:a -c:v:0 libx264 -b:v:0 5000k -maxrate:v:0 5350k -bufsize:v:0 7500k \
    -map "[v2out]" -map 0:a -c:v:1 libx264 -b:v:1 3000k -maxrate:v:1 3210k -bufsize:v:1 4500k \
    -map "[v3out]" -map 0:a -c:v:2 libx264 -b:v:2 1500k -maxrate:v:2 1605k -bufsize:v:2 2250k \
    -c:a aac -b:a 128k -ac 2 \
    -f hls -hls_time 6 -hls_list_size 0 \
    -hls_segment_filename 'stream_%v/segment_%03d.ts' \
    -master_pl_name master.m3u8 \
    -var_stream_map "v:0,a:0 v:1,a:1 v:2,a:2" \
    'stream_%v/index.m3u8'

生成的文件包括：

master.m3u8: 主播放列表。
stream_0/: 1080p 版本的切片。
stream_1/: 720p 版本。
stream_2/: 480p 版本。

在网页中实现 HLS 视频的播放

使用以下 HTML 和 JavaScript 代码来播放 HLS 视频并显示当前分辨率

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>自动切换清晰度的视频示例</title>
    <style>
      /* 定义显示分辨率的样式 */
      #resolution-display {
        position: absolute;
        top: 10px;
        left: 10px;
        padding: 5px 10px;
        background-color: rgba(0, 0, 0, 0.7);
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
      }

      /* 确保视频容器是相对定位 */
      #video-container {
        position: relative;
        display: inline-block;
      }

      video {
        width: 100%;
        height: auto;
      }
    </style>
  </head>

  <body>
    <!-- 视频播放器 -->
    <video id="video" controls></video>
    <!-- 分辨率显示 -->
    <div id="resolution-display">分辨率：未知</div>

    <!-- 引入 hls.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script>
      // 获取视频元素
      var video = document.getElementById("video");
      // 获取分辨率显示元素
      var resolutionDisplay = document.getElementById("resolution-display");
      // HLS 视频源地址（.m3u8 文件）
      var videoSrc = "./video/video2/master.m3u8";

      // 检查浏览器是否支持 hls.js
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource(videoSrc);
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          video.play();
        });

        // 监听 LEVEL_SWITCHED 事件，当播放级别切换时触发
        hls.on(Hls.Events.LEVEL_SWITCHED, function (event, data) {
          updateResolution();
        });

        // 初始获取当前分辨率
        hls.on(Hls.Events.LEVEL_LOADED, function (event, data) {
          updateResolution();
        });

        // 定义更新分辨率的函数
        function updateResolution() {
          var level = hls.levels[hls.currentLevel];
          if (level) {
            var width = level.width;
            var height = level.height;
            resolutionDisplay.textContent = "分辨率：" + width + "x" + height;
          }
        }
      }
      // 对于支持原生 HLS 的浏览器（如 Safari）
      else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = videoSrc;
        video.addEventListener("loadedmetadata", function () {
          video.play();
          // 获取视频的实际分辨率
          resolutionDisplay.textContent =
            "分辨率：" + video.videoWidth + "x" + video.videoHeight;
        });
      } else {
        console.error("该浏览器不支持 HLS 播放。");
      }
    </script>
  </body>
</html>

#前端 #FFmpeg

怎么在网页中实现自动调整视频的清晰度

使用 FFmpeg 生成 HLS 视频流

转码视频为多码率版本

在网页中实现 HLS 视频的播放

评论 · 0