demand background

To make an on-demand service through nginx, ffmpeg intercepts a certain frame in the video as the cover of the video, and the front page displays the cover, and links to the corresponding video playback link, loads the player to play

Briefly introduce the way ffmpeg intercepts a certain frame in the video

Intercept the first frame of the video, and shorten the frame to the size. Note that the parameter -ss indicates the start time. If it is not suitable, there will be no output. Just adjust the size according to the video duration. I will shrink the video screenshot to 288*162 size

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

I capture two pictures of two videos as the cover of the video according to the above method

Configure nginx rules

Configuration of statically loaded images

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

Write an html file that displays pictures

Write an html file named display.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>

Copy the image resource to the nginx configuration directory

My nginx installation directory is /usr/cloudland/nginx

Put the display.html file in the html/imge directory, as shown in the figure

browser verification

Then open http://172.24.0.74/image/display.html with a browser

At this time, you will find that there are already two pictures displayed and loaded.

Load the playback link to the picture

Modify the display.html file

<!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>

Copy the video corresponding to the picture to the VOD path configured by nginx

Note that the VOD path is in the

Browser verification image link

The browser reopens http://172.24.0.74/image/display.html

Since I have not configured the player, the corresponding m3u8 file will be downloaded directly when the browser is opened

How nginx uses html to display multiple pictures and add playback links