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

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

news 2025/8/31 8:05:29

需求背景

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

接口测试中缓存处理策略

在接口测试中&#xff0c;缓存处理策略是一个关键环节&#xff0c;直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性&#xff0c;避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明&#xff1a; 一、缓存处理的核…...

编程新知 2025/8/30 14:07:36

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

编程新知 2025/8/31 7:31:14

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

编程新知 2025/8/28 17:46:19

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/8/3 16:10:07

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

编程新知 2025/8/30 17:07:20

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2（Navigation2）的行为树框架中，行为树节点插件按照功能分为 Action（动作节点）、Condition（条件节点）、Control（控制节点） 和 Decorator（装饰节点） 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务，直接与硬件、传感器或外部系统…...

编程新知 2025/7/24 3:18:58

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/8/26 17:42:26

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/7/8 11:33:47

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/8/31 0:24:28