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

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

news 2026/5/10 17:26:43

需求背景

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

注意的点播视频路径在

浏览器验证图片链接

浏览器重新打开http://172.24.0.74/image/display.html

由于我没有配置播放器，所以浏览器打开的话会直接下载对应的m3u8文件

相关文章：

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

需求背景通过nginx来做个点播服务&#xff0c;ffmpeg截取视频中的某一帧作为视频的封面&#xff0c;前端页面展示这个封面&#xff0c;&#xff0c;并链接到对应的视频播放链接&#xff0c;加载播放器进行播放简单介绍一下ffmpeg截取视频中的某一帧的方式截取视频的第一帧&…...

编程日记 2023/5/8 18:19:30

【蓝桥杯集训·每日一题】Acwing 3729. 改变数组元素

文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维差分区间合并一、题目 1、原题链接 3729. 改变数组元素 2、题目描述 给定一个空数组 V 和一个整数数组 a1,a2,…,an。 现在要对数组 V 进行 n 次操作。 第 i 次操作的…...

编程日记 2023/5/25 1:40:27

springmvc执行流程

文章目录前言一、springMVC请求执行流程二、组件说明以下组件通常使用框架提供实现&#xff1a;总结前言 本篇文章是对springmvc的补充 接上篇文章springmvc入门https://blog.csdn.net/l_zl2021/article/details/127120873 一、springMVC请求执行流程 1.用户发送请求至前端控制…...

编程日记 2023/5/23 11:55:30

SpringMVC(2)

一)接受到JSON格式的数据:使用RequestBody来进行接收 ResponseBody表示的是返回一个非页面的数据 RequestBody表示的是后端要接受JSON格式的数据 一)接收单个格式的JSON格式的数据&#xff0c;我们使用一个对象来进行接收 1)我们之前接受GET请求中的queryString中的参数的时候&…...

编程日记 2023/5/31 20:16:19

Jackson序列化json时null转成空串或空对象

在项目中可能会遇到需要将null转""&#xff0c;可以通过以下方法解决。一&#xff1a;添加JacksonConfig 配置import com.fasterxml.jackson.core.JsonGenerator;import com.fasterxml.jackson.databind.JsonSerializer;import com.fasterxml.jackson.databind.Objec…...

编程日记 2023/4/14 23:37:14

如何将Python的上级目录的文件导入？【from.import】

假如有如下目录&#xff1a; -python ----file1 ---------file1_1 ------------------pfile1_1.py ---------pfile1.py ----file2 ---------pfile2.py ----pfile.py ----data.py 在pfile1_1.py中想要将pfile.py 导入怎么办&#xff1f; 首先将其上级目录添加到系统目…...

编程日记 2023/5/2 14:52:38

Java实现碧蓝航线连续作战

目录一.实现功能二.主要思路三.代码实现四.用exe4j生成.exe程序五.最终效果六.代码开源一.实现功能 主线图作战结束到结算页自动点击再次前往 二.主要思路 判断是否进入了结算界面&#xff1a;记录结算界面某个像素点的RGB值&#xff0c;每隔3秒对这个像素点进行比对 移动鼠标…...

编程日记 2023/5/19 8:36:58

Docker笔记

文章目录1.docker为什么会出现2.docker是什么3.传统虚拟机和容器的对比3.1虚拟机3.2容器虚拟化技术3.3两者对比3.4为什么Docker会比VM虚拟机快&#xff1f;4.docker能干嘛6.docker的应用场景7.docker三要素一&#xff1a;镜像&#xff08;Image&#xff09;二&#xff1a;容器&…...

编程日记 2023/5/6 11:57:36

情人节使用AI TOOL来创建一个甜言蜜语的女伴

一、首先使用chatgpt生成一段情侣间的对话&#xff0c;需要反复几次&#xff0c;达到满意的程度&#xff0c;然后将女方的话归在一起。 这是一个情侣私下谈话的场景&#xff0c;女方表示对男朋友精心准备的情人节安排和礼物表示很满意 二、 打开网站&#xff1a;https://lexic…...

编程日记 2023/5/5 23:12:37

G-GhostNet（IJCV 2022）原理与代码解析

paper&#xff1a;GhostNets on Heterogeneous Devices via Cheap Operationscode&#xff1a;https://github.com/huawei-noah/Efficient-AI-Backbones/blob/master/g_ghost_pytorch/g_ghost_regnet.py前言本文提出了两种轻量网路&#xff0c;用于CPU端的C-GhostNet和用于GPU端…...

编程日记 2023/5/19 23:02:57

Ethercat系列（5）TWcat3激活过程的协议分析（续1）

顺序写系统时间偏移从-》主顺序写时间延迟主-》从从-》主顺序写分布式时钟启动主-》从从-》主读多重写系统时间主-》从从-》主顺序写应用层控制主-》从从-》主顺序读错误计数器主-》从从-》主顺序读应用层状态主-》从从-》主顺序读应用层&#xff0c;广播写错误计数器主-》从从…...

编程日记 2023/5/11 2:24:33

QT入门Input Widgets之QScrollBar

目录 一、界面布局功能 1、界面位置介绍 2、控件界面基本属性 2.1 horizontalScrollBar界面属性 3、样式设置 此文为作者原创&#xff0c;创作不易&#xff0c;转载请标明出处&#xff01; 一、界面布局功能 1、界面位置介绍 QScrollBar主要分为两种&#xff0c;一种垂直…...

编程日记 2023/5/27 10:13:23

【ML】基于机器学习的心脏病预测研究(附代码和数据集，多层感知机模型)

写在前面： 首先感谢兄弟们的订阅，让我有创作的动力，在创作过程我会尽最大努力，保证作品的质量，如果有问题，可以私信我，让我们携手共进，共创辉煌。 之前创作过心脏病预测研究文章如下： 【ML】基于机器学习的心脏病预测研究(附代码和数据集，逻辑回归模型) 【ML】基于机…...

编程日记 2023/5/27 10:15:18

工序排序问题--约翰逊法精讲

什么是约翰逊法?约翰逊法是作业排序中的一种排序方法。选出最短加工时间i*&#xff0c;若最短加工时间有多个&#xff0c;任选1个.若i*出现在机床1&#xff0c;它对应的工件先安排加工&#xff0c;否则放在最后安排&#xff0c;安排后划去该工件,重复上两个步骤&#xff0c;直…...

编程日记 2023/5/25 17:31:17

WebDAV之葫芦儿·派盘+网盘精灵

网盘精灵 支持WebDAV方式连接葫芦儿派盘。 推荐一款让您的iPhone、iPod、iPad 变成WebDav客户端的软件，支持从WebDav服务器连接葫芦儿派盘服务进行上传和下载件。 网盘精灵让您的iPhone、iPod、iPad 变成WebDav客户端。功能：WebDav操作、文件共享、本地文件管理...

编程日记 2023/5/31 7:55:44

计算机网络期末知识点总结

计算机网络期末知识点总结第四章—网络层&#xff1a;数据面4.1概述4.2虚电路和数据报网络4.3路由器工作原理4.4网际协议&#xff1a;因特网中的转发和编址第五章 网络层&#xff1a;控制面5.1路由选择算法5.2路由器中的路由选择5.3广播和多播路由选择第六章 链路层&#xff08…...

编程日记 2023/4/22 8:40:16

【Vue3 组件封装】vue3 轮播图组件封装

文章目录轮播图功能-获取数据轮播图-通用轮播图组件轮播图-数据渲染轮播图-逻辑封装轮播图功能-获取数据 目标: 基于pinia获取轮播图数据 核心代码&#xff1a; &#xff08;1&#xff09;在types/data.d.ts文件中定义轮播图数据的类型声明 // 所有接口的通用类型 export typ…...

编程日记 2023/5/17 15:49:45

电力国家(行业)标准目录

1、3&#xff5e;63kV交流高压负荷开关 GB 3804-90 代替 GB 3804-882、电气装置安装工程35kV及以下架空电力线路施工及验收规范Code for construction and acceptance of 35kVand umder over head power levels electricequipment installation engineeringGB50173—923、带电作…...

编程日记 2023/6/1 10:28:12

如何实现倒序输出

问题 如何实现字符串的大小写转换并倒序输出。 方法 采用Java自带的类方法进行倒序。 package homework4; public class Blog09 { public static void main(String[] args) { String a "HelloWord"; String a2 a.toUpperCase(); String a3 …...

编程日记 2023/5/27 20:47:15

遗留系统的自动化测试策略和实践方法

1 什么是遗留系统 遗留系统是一种旧的方法、旧的技术、旧的计算机系统或应用程序，属于或与以前的、过时的计算机系统有关，但仍在使用中。通常，将系统称为“遗留系统”意味着它可能已经过时或需要更换，但是系统还在对外提供服务，还在不断的迭代，有新的需求不断的交付。Ma…...

编程日记 2023/5/27 10:22:37

通过环境变量为Hermes Agent配置Taotoken自定义提供方

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 通过环境变量为Hermes Agent配置Taotoken自定义提供方 对于使用Hermes Agent框架的开发者而言&#xff0c;接入不同的模型服务商通…...

编程新知 2026/5/10 17:04:16

基于RAG与大模型的法律AI助手：国家赔偿案件全流程智能处理实践

1. 项目概述&#xff1a;一个为法律从业者设计的国家赔偿AI助手在行政与司法实践中&#xff0c;国家赔偿案件的处理往往涉及复杂的法律适用、繁琐的程序计算以及海量的文书检索。对于律师、法务工作者乃至法律研究者而言&#xff0c;每一个案件都像是一次精密的“法律工程”&am…...

编程新知 2026/5/10 16:16:28

基于Cloudflare Workers的Gemini模型OpenAI API兼容代理部署指南

1. 项目概述&#xff1a;将Google Gemini模型桥接到OpenAI生态 如果你和我一样&#xff0c;既想体验Google Gemini 2.5系列模型强大的推理和视觉能力&#xff0c;又早已习惯了OpenAI API那套简洁、标准化的调用方式&#xff0c;那么你肯定也遇到过“生态割裂”的烦恼。每次想用…...

编程新知 2026/5/10 14:45:53

JetBrains IDE重置插件终极指南：告别30天试用期限制

JetBrains IDE重置插件终极指南&#xff1a;告别30天试用期限制 【免费下载链接】ide-eval-resetter 项目地址: https://gitcode.com/gh_mirrors/id/ide-eval-resetter 还在为JetBrains IDE的30天试用期到期而烦恼吗&#xff1f;ide-eval-resetter项目为你提供了一个简…...

编程新知 2026/5/10 12:18:01

从零搭建智能视频分析系统：DeepCamera开源框架全解析

1. 项目概述&#xff1a;当摄像头遇见AI&#xff0c;一个开源项目的诞生几年前&#xff0c;我在为一个社区安防项目选型时&#xff0c;遇到了一个非常典型的问题&#xff1a;市面上成熟的智能摄像头方案要么是闭源的“黑盒”&#xff0c;数据安全存疑&#xff1b;要么价格高昂&…...

编程新知 2026/5/10 10:59:29

终极键盘连击修复方案：Keyboard Chatter Blocker 拯救你的机械键盘

终极键盘连击修复方案&#xff1a;Keyboard Chatter Blocker 拯救你的机械键盘 【免费下载链接】KeyboardChatterBlocker A handy quick tool for blocking mechanical keyboard chatter. 项目地址: https://gitcode.com/gh_mirrors/ke/KeyboardChatterBlocker 你是否曾…...

编程新知 2026/5/10 10:43:13

卷积运算：从数学原理到信号处理实战

1. 卷积基础与核心概念在数字信号处理领域&#xff0c;卷积运算堪称"瑞士军刀"般的存在。我第一次接触这个概念是在研究生时期的语音信号处理课上&#xff0c;当时教授用了一个生动的比喻&#xff1a;卷积就像把一杯墨水倒入一盆清水中&#xff0c;观察墨水如何随时间…...

编程新知 2026/5/10 7:47:11

从传统信号处理到AI：电弧故障检测技术的演进与工程实践

1. 项目概述&#xff1a;电弧故障检测的“火眼金睛”在电气安全领域&#xff0c;电弧故障就像一个潜伏的“幽灵”&#xff0c;它不像过载或短路那样产生巨大的电流&#xff0c;而是以一种间歇性、不稳定的方式释放能量&#xff0c;极易引燃周围可燃物&#xff0c;是引发电气火灾…...

编程新知 2026/5/10 4:50:11

智能体编排实战：从单智能体到多智能体协同的架构设计与实现

1. 项目概述与核心价值最近在探索AI应用落地的过程中&#xff0c;我反复遇到一个瓶颈&#xff1a;单个大语言模型&#xff08;LLM&#xff09;的能力边界非常明显。让它写个文案、总结个文档还行&#xff0c;但一旦涉及到需要多步骤决策、调用外部工具、或者处理复杂逻辑链的任…...

编程新知 2026/5/10 4:27:36

基于RAG的代码库智能问答系统：从原理到实战部署

1. 项目概述&#xff1a;当GitHub仓库成为你的私人AI助手最近在折腾AI应用开发的朋友&#xff0c;可能都遇到过这样的场景&#xff1a;手头有一个不错的开源项目&#xff0c;想基于它做二次开发&#xff0c;或者想快速理解一个复杂项目的代码结构。传统的做法是&#xff0c;把整…...

编程新知 2026/5/10 4:27:33