jquery+video 获取视频第一帧做视频封面

最新推荐文章于 2023-09-06 09:59:00 发布
最新推荐文章于 2023-09-06 09:59:00 发布
阅读量1.7k 收藏 4
点赞数 3
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dell_Luo/article/details/116293767
版权

在这里插入图片描述
直接在视频资源后添加#t=0.1 即可 由于每个视频资源不同有的视频前一两秒是黑屏的所以时间可自定义例如图上我直接放的#t=2 不是第一帧但是可实现封面效果

最终效果图如下:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果调整了秒数还是不出来,有可能是video引用的插件样式影响了,如果有多个video视频资源切换不同的tabs时 第一帧封面消失了,可能是被currentTime()影响了
在这里插入图片描述

dell_Luo
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
h5截取视频当前一帧图片
09-11
项目中遇到需要在线播放视频，并且截取当前一帧图片，并保存。尝试了多种方法之后，终于通过 canvas画布+videojs+nginx截取成功。附件中是部分代码和nginx配置。
jquery+html5视频播放器插件特效代码
03-20
3. `.attr()`: 获取或设置元素属性，用于控制视频状态，如`$('video').attr('paused', false)`来播放视频。 4. `.css()`: 修改元素样式，实现自定义控制条和播放效果。 5. `.animate()`: 创建平滑的动画效果，例如...
js 获取video视频标签的第一帧图片
qq_35515563的博客
08-26 1万+
js 获取video视频标签的第一帧图片 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </title&g...
截取视频第一帧，截取第一帧做封面图
oneyJiang
03-06 6964
&lt;input type="file" id="input" @change="chooseVideoInput" class="uploadVideo_input"&gt;var video = document.getElementById("video");var canvas = document.createElement("canvas");
js点击视频播放以及封面背景图片
hql1024的博客
11-21 1078
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点击视频播放以及封面背景图片</title> </head> <style> </style> <body> <vi...
video截取某一帧作为封面的方法
最新发布
weixin_43894781的博客
09-06 411
【代码】video截取某一帧作为封面的方法。
上传视频 获取视频第一帧 做为封面 前端js
different9102的博客
03-31 853
用canvas获取视频第一帧作为封面图
jQuery+html5 video点击弹出视频播放特效代码.zip
11-17
在本文中，我们将深入探讨如何使用jQuery和HTML5的video元素来实现视频播放的弹出特效。这个"jQuery+html5 video点击弹出视频播放特效代码.zip"包含了一个实例，帮助开发者了解并应用这种效果。 首先，让我们了解...
jquery+html5视频播放器插件.zip
11-19
3. **视频预览和缩略图**：在视频加载前展示静态图片，或者在进度条上显示视频帧，提供更好的用户体验。 4. **视频播放列表**：支持多个视频的播放，用户可以在一个播放器中无缝切换不同的视频内容。 5. **播放/...
jquery+html5视频播放器插件
04-02
此外，通过API，开发者可以获取视频的当前状态，如播放时间、总时长等，从而实现更精细的控制。 CSS3在播放器设计中起到美化和增强用户体验的作用。通过使用CSS3的过渡、动画和选择器，可以创建出动态的控制按钮、...
视频根据url获取第一帧图片,获取任一帧图片
yuanpeng1014的博客
06-19 3981
+ (UIImage*) thumbnailImageForVideo:(NSURL *)videoURL atTime:(NSTimeInterval)time {              AVURLAsset *asset = [[AVURLAsset alloc] initWithURL:videoURL options:nil];       NSParameterAssert(a
Canvas截取video上的第一帧作为封面
越陌度阡
08-28 2482
var canvas = document.createElement('canvas'); var img = document.getElementById('img'); const video = document.getElementById('video'); video.setAttribute('crossOrigin', 'anonymous'); canvas.width =...
获取视频video第一个帧的图片作为视频的背景图片
weixin_45315794的博客
09-06 5781
获取视频video第一个帧的图片作为视频的背景图片 一般情况下，Android版本可自动获取视频的第一帧作为视频的背景图片，但ios是无法获得的，只能手动为其添加视频的背景图片。 制作这第一帧图片我使用的原理：拿到视频播放路径后，创建一个video标签，将路径传给src，使其自动播放时，截取展示的第一个图片，使用canvas将其画出来， 1、设置video背景图片的属性 在video中属性很多，为视频设置背景图片的属性为：poster，该属性的值就为图片的路径 2、上传本地视频，获取视频的宽高及播放长度等
android 上传视频到腾讯云文档,上传视频截取第一帧做视频封面，并上传腾讯云点播...
weixin_32352621的博客
05-28 662
1、VUE页面上传视频到后台:limit="1":http-request="uploadVideo" :file-list="fileList3">点击上传只能上传AVI、WMV、RM、RMVB、MP4等格式文件2、自定义上传方法import axios from 'axios'uploadVideo (event){let form = new FormData()var that = ...
一个简单的图片预览
在夜里奔跑的人
01-03 408
//图片预览             $("#prodimg").change(function () {                 var objUrl = getObjectURL(this.files[0]);                 console.log("objUrl = " + objUrl);                 if (objUrl) {  
页面视频播放完不显示最后一帧而回到播放前原始的样式
Cryday的小屋
10-29 3960
&lt;div class="breaking"&gt; &lt;video id="myvideo"&gt; &lt;source src="xiangguandeshipin.mp4" type="video/mp4"&gt; &lt;/video&gt;
jq + tp 实现上传视频并自动获取某一帧图片保存缩略图
qi15933445203的博客
08-17 821
最近拿到一个项目需求：上传视频并且自动获取某一帧作为缩略图，查了很多方法，大部分都是php端安装ffmpeg，后来试了试前端jq，中间也碰了几次壁，最终还是实现了，可能绕了个远，但是目标还是实现了 首先，视频上传，这个就不用多说了，一搜一大堆，自行编写此部分代码 我们直入主题，从后台传给前台视频链接后开始 //这里我要说的是这些代码内容需要放在和自己视频同一域名下才可执行成功 获取到视频链接，我这里做的是提交的时候进行触发自动生成缩略图 首先页面上添加一个video视频标签，当然可以不想显示的
如何截取视频作为封面图
weixin_44425559的博客
09-09 1103
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>capture screen</title> </head> <body> <!-- #t=9 可以设置截取那一帧的 --> <video id="video1" src='1.mp4#t=9' controls="controls" poster='' onloads
video标签截取当前帧图
热门推荐
Eighteen Z
07-24 1万+
也是工作中的一个需求，需要在视频播放中截取当前帧的图片用来当做海报图或者封面图。 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &
jquery实现弹窗,jquery+video实现点击播弹窗放视频功能
05-26
jQuery代码： ```js $(document).ready(function() { $('.open-popup').click(function() { $('.popup').fadeIn(); }); $('.close').click(function() { $('#video')[0].pause(); $('.popup').fadeOut(); })...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值