当前位置：首页 > news >正文

nginx如何用html显示多个图片并加入播放链接

news 2025/7/16 4:39:12

需求背景

通过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

我按照上述方式截取两个视频的两张图片作为视频的封面

配置nginx规则

静态加载图片的配置

  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

这个时候会发现已经有两个图片显示加载进来了

给图片加载播放链接

修改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配置的视频点播路径

注意的点播视频路径在