# 基於 Web 實現 m3u8 視頻播放的簡單應用示例 ## 實現思路將視頻（MP4 等）轉換為 M3U8 視頻的服務，可以按照以下步驟進行操作： 1. 將視頻（MP4 等）轉換為 M3U8：在服務中，使用適當的工具（如 FFmpeg）將接收到的視頻（MP4 等）轉換為 M3U8 格式。這將生成 ...

基於 Web 實現 m3u8 視頻播放的簡單應用示例

實現思路

將視頻（MP4 等）轉換為 M3U8 視頻的服務，可以按照以下步驟進行操作：

將視頻（MP4 等）轉換為 M3U8：在服務中，使用適當的工具（如 FFmpeg）將接收到的視頻（MP4 等）轉換為 M3U8 格式。這將生成一個包含視頻流的 M3U8 文件以及相應的分段（TS）文件。
提供邊下邊播服務：將生成的 M3U8 文件和分段文件存儲在適當的位置（如伺服器上的文件夾或雲存儲服務中）。然後，可以通過將這些文件的 URL 提供給前端，使前端能夠通過邊下邊播的方式逐段載入和播放視頻。
前端實現 M3U8 播放器：在前端，可以使用現有的視頻播放器庫（如 video.js、plyr.js 等）或基於 HLS（HTTP Live Streaming）協議的播放器庫（如 hls.js）來實現 M3U8 視頻的播放器。這些庫可以通過提供 M3U8 文件的 URL 來載入和播放視頻。

一、將視頻（MP4 等）轉換為 M3U8 視頻

使用 Python 實現將 MP4 視頻轉換為 M3U8 視頻，按照以下步驟進行操作：

安裝所需的庫：首先，確保已安裝所需的庫。在 Python 中，可以使用 ffmpeg-python 庫來與 FFmpeg 進行交互，以執行視頻轉換操作。可以使用以下命令安裝該庫：

pip install ffmpeg-python

導入庫和設置轉換函數：在 Python 代碼中，導入 ffmpeg 模塊，並創建一個函數，用於將 MP4 轉換為 M3U8。以下是一個示例代碼：

import ffmpeg

def convert_mp4_to_m3u8(input_file, output_file):
    """
    Converts an MP4 file to an M3U8 file using ffmpeg.
    Args:
        input_file (str): The path to the input MP4 file.
        output_file (str): The path to the output M3U8 file.
    Returns:
        bool: True if the conversion was successful, False otherwise.
    """
    try:
        ffmpeg.input(input_file).output(output_file, format='hls', hls_time=10, hls_segment_type='mpegts').run()
        return True
    except ffmpeg.Error as e:
        print(f"An error occurred during video conversion: {e.stderr}")
        return False

在這個示例代碼中，convert_mp4_to_m3u8 函數接受輸入文件路徑和輸出文件路徑作為參數。它使用 FFmpeg 將輸入文件轉換為 M3U8 格式，並將分段（TS）文件輸出到指定的輸出文件路徑。

二、實現 HTTP 伺服器，提供 M3U8 視頻的訪問

方法一、使用 Python 標準庫中的 `http.server` 模塊

這個模塊提供了一個簡單的 HTTP 伺服器，可以處理 GET 和 HEAD 請求，並可以為客戶端提供靜態文件。

以下是一個簡單的示例代碼，可以啟動一個 HTTP 伺服器併為客戶端提供視頻等資源的訪問：

import http.server
import socketserver

PORT = 8000

Handler = http.server.SimpleHTTPRequestHandler

with socketserver.TCPServer(("", PORT), Handler) as httpd:
    print("serving at port", PORT)
    httpd.serve_forever()

在這個示例中，創建了一個 http.server.SimpleHTTPRequestHandler 處理程式，它可以處理 GET 和 HEAD 請求，並可以為客戶端提供靜態文件。然後，使用 socketserver.TCPServer 創建一個 TCP 伺服器，並將處理程式傳遞給它。最後，調用 serve_forever() 方法開始監聽來自客戶端的請求。

將視頻等資源放在伺服器的根目錄下，例如 ./video.m3u8，客戶端可以通過瀏覽器訪問 http://localhost:8000/video.m3u8 來獲取該資源。客戶端也可以使用其他 HTTP 客戶端程式（例如 curl 或者 wget）來訪問資源。

不過需要註意的是，這種方式只適合提供小型的靜態文件。如果要提供大型視頻等資源，最好使用專門的伺服器軟體來處理，例如 Apache 或 Nginx。

方法二、使用 Flask 框架

Flask 框架可以提供一種更為靈活的方式來實現視頻等靜態資源的訪問。下麵是一個簡單的示例代碼：

from flask import Flask, send_from_directory

app = Flask(__name__)

@app.route('/<path:path>')
def static_file(path):
    return send_from_directory('.', path)

if __name__ == '__main__':
    app.run(port=8000)

在這個示例中，定義了一個名為 static_file 的路由，它可以處理所有的 HTTP GET 請求，並使用 send_from_directory 函數返回請求的文件。在這裡，將請求的文件從當前目錄中返回。如果要返回其他目錄下的文件，可以將 send_from_directory 函數的第一個參數設置為目錄的路徑。

要訪問視頻等靜態資源，可以將它們放在與 Flask 應用程式相同的目錄中，並使用相對路徑作為 URL。例如，如果視頻文件名為 video.m3u8，可以使用 http://localhost:8000/video.m3u8 訪問該文件。

需要註意的是，這種方式也適用於小型的靜態文件。如果要提供大型視頻等資源，最好使用專門的伺服器軟體來處理，例如 Apache 或 Nginx。另外，這裡的示例代碼只提供了最簡單的靜態資源訪問功能，如果需要更高級的功能（例如緩存控制、安全性等），可以使用 Flask 擴展或者在代碼中自行實現。

三、Web 前端播放 M3U8 視頻

M3U8 是一種基於 HTTP Live Streaming (HLS) 協議的視頻流播放格式（在播放 M3U8 文件時需要將視頻文件和 M3U8 文件都放在 HTTP 伺服器上，並通過 HTTP 協議進行訪問）。要在 Web 前端中實現 M3U8 播放器，可以使用一些開源的 JavaScript 庫，例如 hls.js 和 video.js。

hls.js 是一個基於 JavaScript 實現的 M3U8 播放器庫。它可以自動檢測瀏覽器是否支持 HLS，如果不支持則使用 Flash 播放器來進行播放。以下是一個使用 hls.js 的示例代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>hls.js player example</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  </head>
  <body>
    <video id="video" controls></video>
    <script>
      var video = document.getElementById("video");
      if (Hls.isSupported()) {
        var hls = new Hls();
        hls.loadSource("http://127.0.0.1:8000/path/to/video.m3u8");
        hls.attachMedia(video);
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          // video.play();
        });
      } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
        video.src = "http://127.0.0.1:8000/path/to/video.m3u8";
        video.addEventListener("loadedmetadata", function () {
          // video.play();
        });
      }
    </script>
  </body>
</html>

在這個示例中，首先��頁面中引入了 hls.js 庫。然後，創建一個 HTML5 video 元素，併為它設置了 controls 屬性，以便用戶可以控制視頻的播放。

接著，使用 Hls.isSupported() 方法檢測瀏覽器是否支持 HLS。如果支持，則創建一個 Hls 對象，並使用 loadSource 方法載入 M3U8 文件。然後，使用 attachMedia 方法將 video 元素附加到 Hls 對象上，併在 MANIFEST_PARSED 事件觸發時開始播放視頻。

如果瀏覽器不支持 HLS，就檢測是否支持 application/vnd.apple.mpegurl 格式。如果支持，則為 video 元素的 src 屬性設置 M3U8 文件的路徑，併在 loadedmetadata 事件觸發時開始播放視頻。

除了 hls.js，還有一些其他的 JavaScript 庫可以用來實現 M3U8 播放器，例如 video.js。下麵是一個使用 video.js 的示例代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>video.js player example</title>
    <link href="https://vjs.zencdn.net/8.3.0/video-js.css" rel="stylesheet" />
    <script src="https://vjs.zencdn.net/8.3.0/video.min.js"></script>
  </head>
  <body>
    <video id="video" class="video-js vjs-default-skin" controls></video>
    <script>
      var video = videojs("video", {
        techOrder: ["html5", "flash"],
        sources: [
          {
            src: "http://127.0.0.1:8000/path/to/video.m3u8",
            type: "application/x-mpegURL",
          },
        ],
      });
      // video.play();
    </script>
  </body>
</html>

在這個示例中，首先引入了 video.js 的 CSS 和 JavaScript 文件。然後，創建了一個 HTML5 video 元素，併為它設置了 class 屬性，以便應用 video.js 的預設樣式。

接著，使用 videojs 函數創建一個 video.js 對象，併為其指定了 techOrder 和 sources 選項。techOrder 選項指定了播放視頻時使用的技術順序，如果瀏覽器不支持 HLS，則會使用 Flash 播放器來進行播放。sources 選項指定了待播放的 M3U8 文件的路徑和類型。

最後，調用 play 方法開始播放視頻。

作者：飛仔FeiZai

出處：https://www.cnblogs.com/yuzhihui/p/17444070.html

聲明：歡迎任何形式的轉載，但請務必註明出處！！！