nginx如何用html显示多个图片并加入播放链接
需求背景
通过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来做个点播服务，ffmpeg截取视频中的某一帧作为视频的封面，前端页面展示这个封面，，并链接到对应的视频播放链接，加载播放器进行播放简单介绍一下ffmpeg截取视频中的某一帧的方式截取视频的第一帧&…...
【蓝桥杯集训·每日一题】Acwing 3729. 改变数组元素
文章目录一、题目1、原题链接2、题目描述二、解题报告1、思路分析2、时间复杂度3、代码详解三、知识风暴一维差分区间合并一、题目 1、原题链接 3729. 改变数组元素 2、题目描述 给定一个空数组 V 和一个整数数组 a1,a2,…,an。 现在要对数组 V 进行 n 次操作。 第 i 次操作的…...
springmvc执行流程
文章目录前言一、springMVC请求执行流程二、组件说明以下组件通常使用框架提供实现：总结前言 本篇文章是对springmvc的补充 接上篇文章springmvc入门https://blog.csdn.net/l_zl2021/article/details/127120873 一、springMVC请求执行流程 1.用户发送请求至前端控制…...
SpringMVC(2)
一)接受到JSON格式的数据:使用RequestBody来进行接收 ResponseBody表示的是返回一个非页面的数据 RequestBody表示的是后端要接受JSON格式的数据 一)接收单个格式的JSON格式的数据，我们使用一个对象来进行接收 1)我们之前接受GET请求中的queryString中的参数的时候&…...
Jackson序列化json时null转成空串或空对象
在项目中可能会遇到需要将null转""，可以通过以下方法解决。一：添加JacksonConfig 配置import com.fasterxml.jackson.core.JsonGenerator;import com.fasterxml.jackson.databind.JsonSerializer;import com.fasterxml.jackson.databind.Objec…...
如何将Python的上级目录的文件导入？【from.import】
假如有如下目录： -python ----file1 ---------file1_1 ------------------pfile1_1.py ---------pfile1.py ----file2 ---------pfile2.py ----pfile.py ----data.py 在pfile1_1.py中想要将pfile.py 导入怎么办？ 首先将其上级目录添加到系统目…...
Java实现碧蓝航线连续作战
目录一.实现功能二.主要思路三.代码实现四.用exe4j生成.exe程序五.最终效果六.代码开源一.实现功能 主线图作战结束到结算页自动点击再次前往 二.主要思路 判断是否进入了结算界面：记录结算界面某个像素点的RGB值，每隔3秒对这个像素点进行比对 移动鼠标…...
Docker笔记
文章目录1.docker为什么会出现2.docker是什么3.传统虚拟机和容器的对比3.1虚拟机3.2容器虚拟化技术3.3两者对比3.4为什么Docker会比VM虚拟机快？4.docker能干嘛6.docker的应用场景7.docker三要素一：镜像（Image）二：容器&…...
情人节使用AI TOOL来创建一个甜言蜜语的女伴
一、首先使用chatgpt生成一段情侣间的对话，需要反复几次，达到满意的程度，然后将女方的话归在一起。 这是一个情侣私下谈话的场景，女方表示对男朋友精心准备的情人节安排和礼物表示很满意 二、 打开网站：https://lexic…...
G-GhostNet（IJCV 2022）原理与代码解析
paper：GhostNets on Heterogeneous Devices via Cheap Operationscode：https://github.com/huawei-noah/Efficient-AI-Backbones/blob/master/g_ghost_pytorch/g_ghost_regnet.py前言本文提出了两种轻量网路，用于CPU端的C-GhostNet和用于GPU端…...
Ethercat系列（5）TWcat3激活过程的协议分析（续1）
顺序写系统时间偏移从-》主顺序写时间延迟主-》从从-》主顺序写分布式时钟启动主-》从从-》主读多重写系统时间主-》从从-》主顺序写应用层控制主-》从从-》主顺序读错误计数器主-》从从-》主顺序读应用层状态主-》从从-》主顺序读应用层，广播写错误计数器主-》从从…...
QT入门Input Widgets之QScrollBar
目录 一、界面布局功能 1、界面位置介绍 2、控件界面基本属性 2.1 horizontalScrollBar界面属性 3、样式设置 此文为作者原创，创作不易，转载请标明出处！ 一、界面布局功能 1、界面位置介绍 QScrollBar主要分为两种，一种垂直…...
【ML】基于机器学习的心脏病预测研究(附代码和数据集，多层感知机模型)
写在前面： 首先感谢兄弟们的订阅，让我有创作的动力，在创作过程我会尽最大努力，保证作品的质量，如果有问题，可以私信我，让我们携手共进，共创辉煌。 之前创作过心脏病预测研究文章如下： 【ML】基于机器学习的心脏病预测研究(附代码和数据集，逻辑回归模型) 【ML】基于机…...
工序排序问题--约翰逊法精讲
什么是约翰逊法?约翰逊法是作业排序中的一种排序方法。选出最短加工时间i*，若最短加工时间有多个，任选1个.若i*出现在机床1，它对应的工件先安排加工，否则放在最后安排，安排后划去该工件,重复上两个步骤，直…...
WebDAV之葫芦儿·派盘+网盘精灵
网盘精灵 支持WebDAV方式连接葫芦儿派盘。 推荐一款让您的iPhone、iPod、iPad 变成WebDav客户端的软件，支持从WebDav服务器连接葫芦儿派盘服务进行上传和下载件。 网盘精灵让您的iPhone、iPod、iPad 变成WebDav客户端。功能：WebDav操作、文件共享、本地文件管理...
计算机网络期末知识点总结
计算机网络期末知识点总结第四章—网络层：数据面4.1概述4.2虚电路和数据报网络4.3路由器工作原理4.4网际协议：因特网中的转发和编址第五章 网络层：控制面5.1路由选择算法5.2路由器中的路由选择5.3广播和多播路由选择第六章 链路层（…...
【Vue3 组件封装】vue3 轮播图组件封装
文章目录轮播图功能-获取数据轮播图-通用轮播图组件轮播图-数据渲染轮播图-逻辑封装轮播图功能-获取数据 目标: 基于pinia获取轮播图数据 核心代码： （1）在types/data.d.ts文件中定义轮播图数据的类型声明 // 所有接口的通用类型 export typ…...
电力国家(行业)标准目录
1、3～63kV交流高压负荷开关 GB 3804-90 代替 GB 3804-882、电气装置安装工程35kV及以下架空电力线路施工及验收规范Code for construction and acceptance of 35kVand umder over head power levels electricequipment installation engineeringGB50173—923、带电作…...
如何实现倒序输出
问题 如何实现字符串的大小写转换并倒序输出。 方法 采用Java自带的类方法进行倒序。 package homework4; public class Blog09 { public static void main(String[] args) { String a "HelloWord"; String a2 a.toUpperCase(); String a3 …...
遗留系统的自动化测试策略和实践方法
1 什么是遗留系统 遗留系统是一种旧的方法、旧的技术、旧的计算机系统或应用程序，属于或与以前的、过时的计算机系统有关，但仍在使用中。通常，将系统称为“遗留系统”意味着它可能已经过时或需要更换，但是系统还在对外提供服务，还在不断的迭代，有新的需求不断的交付。Ma…...
【Android】系统源码下载及编译
源码及编译 步骤 1：创建一个空目录来存放源码： mkdir aosp cd aosp步骤 2：获取最新版本的 repo 并签出 android-8.1.0_r1 分支： repo init -u https://android.googlesource.com/platform/manifest -b android-8.1.0_r1其中&am…...
基于HTML实现浪漫情人节表白代码（附源代码）
🤵♂️ 个人主页：艾派森的个人主页 ✍🏻作者简介：Python学习者 🐋 希望大家多多支持，我们一起进步！😄 如果文章对你有帮助的话， 欢迎评论 💬点赞Ǵ…...
PCL 平面拟合——RANSAC
文章目录 一、基本思想二、代码示例1、参数选择2、核心代码3、完整代码4、结果展示三、关于 RANSAC 的一些思考参考文献一、基本思想 随机抽样一致性算法RANSAC(Random sample consensus)是一种迭代的方法，从一系列包含有离群值的数据中计算数学模型参数的方法。RANSAC算法本…...
【Linux之Shell脚本实战】监控系统的磁盘空间使用率
【Linux之Shell脚本实战】监控系统的磁盘空间使用率 一、脚本要求二、检查本地系统环境1.检查系统版本2.检查系统内核版本三、编写disk.sh脚本1.创建脚本目录2.编写disk.sh脚本3.执行测试脚本四、查看脚本执行日志文件五、本次实践总结1.脚本定时执行2.实践总结一、脚本要求 1.…...
【Python安全编程】Python实现网络主机和端口扫描
文章目录前言环境准备Python实现主机扫描基于ARP协议基于ICMP协议普通版本多线程版本Python实现端口扫描扫描单个端口利用多线程扫描端口后记前言 本文主要讲几个利用Python实现网络扫描的小例子，可以结合多线程或多进程编程改进实例 我曾经走过多遥远的路 跨越过多…...
四大垃圾回收算法七大垃圾回收器
JVM的运行时内存也叫做JVM堆，从GC的角度可以将JVM分为新生代、老年代和永久代。其中新生代默认占1/3堆内存空间，老年代默认占2/3堆内存空间，永久代占非常少的对内存空间。新生代又分为Eden区、SurvivorFrom区和SurvivorTo区， Eden…...
P1217 [USACO1.5]回文质数 Prime Palindromes
[USACO1.5]回文质数 Prime Palindromes 题目描述 因为 151151151 既是一个质数又是一个回文数（从左到右和从右到左是看一样的），所以 151151151 是回文质数。 写一个程序来找出范围 [a,b](5≤a<b≤100,000,000)[a,b] (5 \le a < b \l…...
用大白话给你科普，到底什么是 API（应用程序编程接口）？
何为API？如果你在百度百科上搜索，你会得到如下结果：API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组…...
企业电子招采系统源码——信息数智化招采系统
信息数智化招采系统 服务框架：Spring Cloud、Spring Boot2、Mybatis、OAuth2、Security 前端架构：VUE、Uniapp、Layui、Bootstrap、H5、CSS3 涉及技术：Eureka、Config、Zuul、OAuth2、Security、OSS、Turbine、Zipkin、Feign、Monitor、…...
【vnc】Ubuntu20.04+vnc安装和配置(中文输入法)
Ubuntu20.04vnc安装和配置(中文输入法) 安装vnc 用以下apt 命令安装： sudo apt install tigervnc-common tigervnc-standalone-server tigervnc-viewer tigervnc-xorg-extension注意，要用standalone-server版本，不要下载Tiger官方安装包&a…...
清城区做模板网站建设/网站建设找哪家公司好
《Java程序设计》试卷三一、选择题(2分*2550分)１、下列关于栈的叙述正确的是A) 栈是非线性结构B) 栈是一种树状结构C) 栈具有先进先出的特征D) 栈具有后进先出的特征２、下列不是InputStream子类的是A) 文件输入流FileInputStreamB) 对象输入流ObjectInpu…...
做影视网站有什么风险/如何做营销活动
责任链模式通用代码干掉if…else 今天想来跟大家讨论一下怎么干掉if else。 已经工作的人可能深有体会：没有什么是if else搞不掂的，如果有，那就再嵌套一层。 大多数人都是做业务开发的，if else是避免不了的，但怎么让…...
常用的网站类型有哪些类型有哪些类型/策划方案怎么做
extra主要有是那种情况：Using index、Using filesort、Using temporary、Using whereUsing where无需多说，就是使用了where筛选条件。数据准备：CREATE TABLE t_blog (id int(11) NOT NULL auto_increment,title varchar(50) default NULL,typ…...
网站建设的好处/信息流推广渠道
dp[i][j]dp[i-a[i][j]dp[i-a[i]][j-1]; 其中前一项j不变表示j这一项无限取转载于:https://www.cnblogs.com/linkzijun/p/6288364.html...
免费下载高清图片素材的网站/关于普通话的手抄报
本文框架如下 第一部分，主要是在阅读代码过程中的日志和笔记； 第二部分，主要介绍了 Redis 的主要框架，以及 Redis 是如何提供服务的，从一个最简单的命令开始讲起； 第三部分，主要介绍 Redis 底…...
昆山自适应网站建设/百度下载安装2019
自学是一件很有趣的事，一旦和某种有目的性的行为挂钩，估计趣味就会降低很多。自从开始学习java的时候，就决定一如既往的走下去，不离不弃。 虽然，Sun已经离开了很久，但是java爱好者开发者依然激情饱满&#…...