無錫網(wǎng)站建設(shè)mkdns如何提高自己在百度的排名
需求背景
通過nginx來做個點播服務(wù),ffmpeg截取視頻中的某一幀作為視頻的封面,前端頁面展示這個封面,,并鏈接到對應(yīng)的視頻播放鏈接,加載播放器進(jìn)行播放
簡單介紹一下ffmpeg截取視頻中的某一幀的方式
截取視頻的第一幀,并將該幀縮略到大小的,注意參數(shù)-ss,是表示起始時間,不合適會沒有輸出,根據(jù)視頻時長調(diào)節(jié)一下大小就可以了,我是將視頻截圖縮小到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
我按照上述方式截取兩個視頻的兩張圖片作為視頻的封面
配置nginx規(guī)則
靜態(tài)加載圖片的配置
location ^~/image{index display.html;}

寫一個顯示圖片的html文件
寫一個html文件命名為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>
將圖片資源拷貝到nginx配置的目錄里
我的nginx安裝目錄是/usr/cloudland/nginx
將display.html文件放到html/imge的目錄下,如示圖

瀏覽器驗證
然后用瀏覽器打開http://172.24.0.74/image/display.html

這個時候會發(fā)現(xiàn)已經(jīng)有兩個圖片顯示加載進(jìn)來了
給圖片加載播放鏈接
修改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>
將圖片對應(yīng)的視頻拷貝到nginx配置的視頻點播路徑
注意的點播視頻路徑在

瀏覽器驗證圖片鏈接
瀏覽器重新打開http://172.24.0.74/image/display.html

由于我沒有配置播放器,所以瀏覽器打開的話會直接下載對應(yīng)的m3u8文件