如何將MP4轉成M3U8到網站上播放

如果像單純

<video src="xxx.mp4">

這樣的播放狀況要整個檔案都抓下到客戶端才能播放

於是要使用m3u8的檔案來播放才會像youtube一樣邊抓邊看

安裝好 ffmpeg

brew install ffmpeg

windows

先安裝 choco

再用 choco 安裝ffmpeg

準備mp4檔案

先下指令確認檔案格式必須是 Video: h264 , Audio: aac

假設有一 main.mp4 檔案

ffprobe main.mp4

便可得到

ffmpeg version 5.0.1-essentials_build-www.gyan.dev Copyright (c) 2000-2022 the FFmpeg developers
  built with gcc 11.2.0 (Rev7, Built by MSYS2 project)
  configuration: --enable-gpl --enable-version3 --enable-static --disable-w32threads --disable-autodetect --enable-fontconfig --enable-iconv --enable-gnutls --enable-libxml2 --enable-gmp --enable-lzma --enable-zlib --enable-libsrt --enable-libssh --enable-libzmq --enable-avisynth --enable-sdl2 --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxvid --enable-libaom --enable-libopenjpeg --enable-libvpx --enable-libass --enable-libfreetype --enable-libfribidi --enable-libvidstab --enable-libvmaf --enable-libzimg --enable-amf --enable-cuda-llvm --enable-cuvid --enable-ffnvcodec --enable-nvdec --enable-nvenc --enable-d3d11va --enable-dxva2 --enable-libmfx --enable-libgme --enable-libopenmpt --enable-libopencore-amrwb --enable-libmp3lame --enable-libtheora --enable-libvo-amrwbenc --enable-libgsm --enable-libopencore-amrnb --enable-libopus --enable-libspeex --enable-libvorbis --enable-librubberband
  libavutil      57. 17.100 / 57. 17.100
  libavcodec     59. 18.100 / 59. 18.100
  libavformat    59. 16.100 / 59. 16.100
  libavdevice    59.  4.100 / 59.  4.100
  libavfilter     8. 24.100 /  8. 24.100
  libswscale      6.  4.100 /  6.  4.100
  libswresample   4.  3.100 /  4.  3.100
  libpostproc    56.  3.100 / 56.  3.100
Input #0, mpegts, from 'output.ts':
  Duration: 00:46:05.09, start: 1.434000, bitrate: 1413 kb/s
  Program 1
    Metadata:
      service_name    : Service01
      service_provider: FFmpeg
  Stream #0:0[0x100]: Video: h264 (High) ([27][0][0][0] / 0x001B), yuv420p(progressive), 1920x820 [SAR 1:1 DAR 96:41], 25 fps, 25 tbr, 90k tbn
  Stream #0:1[0x101](und): Audio: aac (LC) ([15][0][0][0] / 0x000F), 44100 Hz, stereo, fltp, 130 kb/s

將 mp4 轉換成 ts檔案

ffmpeg -i main.mp4 -c copy -bsf:v h264_mp4toannexb output.ts

將 ts 切割成每五秒一個的 ts 檔案

ffmpeg -i output.ts -c copy -map 0 -f segment -segment_list playlist.m3u8 -segment_time 5 output%03d.ts

開一個資料夾將playlist.m3u8 及其他ts放到同一處
建立一個index.html

<head>
  <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    data-setup="{}"
  >
    <source src="playlist.m3u8" type="application/x-mpegURL" />

    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
  <script>

    // 確保 Video.js 已經加載完成
    videojs('my-video').ready(function () {
      var player = this;

      // 監聽進入全螢幕的事件
      player.on('fullscreenchange', function () {
        if (player.isFullscreen()) {
          // 當進入全螢幕模式時，將焦點設置到播放器上
          player.focus();
        }
      });

      // 監聽鍵盤事件
      document.addEventListener('keydown', function (event) {
        var currentTime = player.currentTime(); // 取得當前播放時間

        // 防止空白鍵在輸入框中觸發事件
        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
          return;
        }

        // 判斷按下的按鍵
        switch (event.key) {
          case 'ArrowRight': // 右方向鍵
            player.currentTime(currentTime + 5); // 快進 5 秒
            event.preventDefault(); // 防止全螢幕時按鍵無效
            break;
          case 'ArrowLeft':  // 左方向鍵
            player.currentTime(currentTime - 5); // 倒退 5 秒
            event.preventDefault(); // 防止全螢幕時按鍵無效
            break;
          case ' ': // 空白鍵
            if (player.paused()) {
              player.play();  // 撥放
            } else {
              player.pause(); // 暫停
            }
            event.preventDefault(); // 防止瀏覽器默認行為（如滾動頁面）
            break;
        }
      });
    });
  </script>
</body>

使用任一webserver 將此 html 跑起來

我是使用 http-sever

http-server . -p 9999

開到機器相關位置即可撥放影片