问题描述

现在只有视频 Url 数据，需要提取视频的某一帧作为封面在页面上展示，下面进行具体讲解

提取视频封面

在视频链接后拼上 ?vframe/jpg/offset/0，就是视频的第一帧。

例如视频地址：（这里仅仅举个例子，下面链接是无效链接）

https://qiniu.chinardr.net/6255b6074fc1ca_20220718140220.mp4

视频第一帧图片：

//视频地址+?vframe/jpg/offset/0

https://qiniu.chinardr.net/6255b6074fc1ca_20220718140220.mp4?vframe/jpg/offset/0

还可以添加更多参数设置图片属性

https://qiniu.chinardr.net/6255b6074fc1ca_20220718140220.mp4?vframe/jpg/offset/3/w/400/h/300

参数介绍

offset/ + 指定截取视频的时刻，单位：秒
w/ + 图片宽
h/ + 图片高

注意：

视频链接最好使用七牛云的链接，我试过一些其他的视频链接，有的视频可以生效，但也有许多提取不了视频里的图片的，

解决的方法是：这里可以把需要的视频上传到七牛云上然后替换地址即可

效果图如下：

文章如有错误，恳请大家提出问题，本人不胜感激。不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力长路漫漫，道阻且长

vue项目获取视频封面展示在页面上相关推荐

vue项目中将视频链接分享至推特的解决方法及踩坑记录
vue项目中将视频链接分享至推特的解决方法及踩坑记录将动态改变的视频链接分享至推特,并希望能直接在推特上播放视频的需求实现方法及踩坑记录如果只要将文本或链接分享到推特,不需要推特识别图片/视频等媒 ...
在vue项目前端如何实现展示动态小程序二维码
在vue项目前端如何实现展示动态小程序二维码 (就是根据所对应的商家数据展示一个动态的二维码) 首先,主要的工作还是后端和小程序前端的工作,我们vue项目的前端主要是根据他们给出的url一级所对应的参 ...
css3获取当前时间并显示,实时获取当前时间并展示在页面上
简介实时获取当前时间并展示在页面上,是很多地方常用的:在页面中做此展示以便查看时间.本文使用js通过一个小的demo实现效果. 完整Code 实时展示当前时间 #time { width: 60%; ...
VUE 项目实现大屏展示的响应式
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为pc端的项目没有采用响应式自适应手机端的设计,所以使用lodash插件实现屏幕移动端自适应. 首先下载lodash插件. npm i ...
vue项目实现大屏展示自适应问题
vue项目实现大屏展示自适应问题此处的项目为vue2版本,因为该项目立项阶段未要求兼容大屏设备和移动端设备,原设计稿尺寸1920X1080像素,如何实现响应式布局. 一.安装 postcss-px ...
如何通过中国知网获取期刊封面及目录页
笔者前不久接到一个求助,希望提供某期刊某期的封面及目录页信息,该刊有其发表的论文,现急需.所在馆2012年期刊已经下架打捆(尚未送出装订),无功而返.笔者另行求助,得到中国知网产品经理吕蜜女士的帮助. ...
阿里云oss视频上传后,如何获取视频封面
前言:在阿里云oss视频上传后,我们如何获取视频封面呢?而不是通过上传方式获取封面.其实OSS本身提供了视频截帧功能 OSS提供的视频截帧功能和OSS图片服务功能使用的方式是类似的,都是通过传入x-o ...
php获取视频封面图,PHP执行Linux命令截取视频封面图
我在写项目的时候遇到这样一个问题,用户上传的视频,在展示的时候,用video标签,可是发现是一个黑色的框,最后决定用php来截取一个视频封面,主要用到的方法就是用php来执行linux命令,从而获取视 ...
vue项目获取下拉框选中id_vue treeselect获取当前选中项的label实例
我就废话不多说了,大家还是直接看代码吧~ :options="deptTree" :normalizer="normalizer" v-model=" ...
vue项目获取上传、下载进度
在日常项目中大文件下载或者上传,花费的时间比较长,没有任何提示,用户体验很差. 需要优化,提示文件在下载中,并且显示进度百分比. 1.onUploadProgress 文件上传进度监听一般 onU ...

vue项目获取视频封面展示在页面上

问题描述

提取视频封面

参数介绍

注意：

效果图如下：

vue项目获取视频封面展示在页面上相关推荐

最新文章

热门文章