需要の背景

nginx を介してオンデマンドサービスを作成するために、ffmpeg はビデオの特定のフレームをビデオのカバーとしてインターセプトし、フロントページにカバーが表示され、対応するビデオ再生リンクにリンクし、プレーヤーをロードして再生します。

ffmpeg が特定のフレームをインターセプトする方法をビデオで簡単に紹介します

ビデオの最初のフレームをインターセプトし、フレームをそのサイズに短縮します。パラメーター -ss は開始時間を示していることに注意してください。適切でない場合、出力はありません。ビデオの長さに応じてサイズを調整してください。ビデオのスクリーンショットを 288*162 サイズに縮小します

ffmpeg -ss 20 -i ./1080p_video1.mp4 -frames:v 1 -q:v 2 -vf "scale=288:162:force_original_aspect_ratio=increase,crop=288:162" 1080p_video1.jpg

上記の方法に従って、2つのビデオの2枚の写真をビデオのカバーとしてキャプチャします

nginxルールを構成する

静的にロードされたイメージの構成

  location ^~/image{
                index display.html;
        }

画像を表示する HTML ファイルを作成します。

display.html という名前の HTML ファイルを作成します。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
        </head>
        <body>
        <img src="./720p_video1.jpg" width="162" />
        <img src="./1080p_video1.jpg" width="162" />
        </body>
</html>

画像リソースをnginx構成ディレクトリにコピーします。

私のnginxインストールディレクトリは/usr/cloudland/nginxです

図に示すように、display.html ファイルを html/imge ディレクトリに置きます。

ブラウザの検証

次に、ブラウザでhttp://172.24.0.74/image/display.htmlを開きます。

この時点で、すでに 2 つの写真が表示され、読み込まれていることがわかります。

画像への再生リンクをロードします

display.html ファイルを変更する

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
        </head>
        <body>
        <a href="http://172.24.0.74/vod/720p_video1.mp4/index.m3u8?token=12345"><img src="./720p_video1.jpg" width="162" /></a>
        <a href="http://172.24.0.74/vod/1080p_video1.mp4/index.m3u8?token=12345"><img src="./1080p_video1.jpg" width="162" /></a>
        </body>
</html>

画像に対応するビデオをnginxで設定したVODパスにコピーします

VOD パスは次の場所にあることに注意してください。

ブラウザ認証画像リンク

ブラウザが再度開きますhttp://172.24.0.74/image/display.html

プレーヤーを設定していないため、ブラウザを開いたときに対応する m3u8 ファイルが直接ダウンロードされます。

nginx が HTML を使用して複数の画像を表示し、再生リンクを追加する方法