js截取视频第一帧（截取图片不会是黑色的）

最新推荐文章于 2024-06-08 17:13:02 发布
最新推荐文章于 2024-06-08 17:13:02 发布
阅读量1.2k 收藏 2
点赞数 1
文章标签： javascript 音视频 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangxiaodui/article/details/134932980
版权
本文介绍了在前端开发中遇到的一个问题，即在截取视频第一帧时，图片显示为黑色。作者在Windows 7和Windows 10的Chrome浏览器上进行了测试，发现偶尔会出现这个问题。经过搜索和尝试，最终找到了解决方案，虽然不清楚具体是哪行代码起作用，但提供的完整JS方法可以避免截取到黑色图片。
摘要由CSDN通过智能技术生成

场景

最近测试提的bug里有个我做的上传视频的功能，编辑回显的视频封面有时候是黑色的。经排查是在截取视频第一帧时出的问题。

问题

我的电脑是win7系统，测试们的电脑是win10系统，且都是用的chrome浏览器，我的是截图的图片每次都是正常的，但是他们的电脑使用该功能时确实偶尔会出现黑色图片封面的问题。经从网上搜索终于解决了，由于复现不了bug搞了一下午。

解决

最终不知道加的哪行代码起的作用，反正这些代码是起了解决截取视频第一帧图片不会是黑色的问题的。
video.setAttribute('crossOrigin', 'anonymous');
video.setAttribute('preload', 'auto');
video.setAttribute('autoplay', true);
video.setAttribute('muted', true)
最低0.47元/天 解锁文章
悦悦猪
关注
js截取视频第一帧_JS截取视频第一帧
weixin_39976748的博客
12-19 685
当视频能够预览并上传后，非要来一张视频第一帧的截图贴上，第一帧是黑的怎么办，下一帧。2020-6-12 更新：根据留言问题今天又试了一下，发现相同代码下，IE/火狐等浏览器都可以正常截取，但谷歌浏览器无论是video的哪一种方法，或在哪里添加定时器，截取到的“第一帧”都是黑屏;解决办法：在video标签上添加autoplay与muted属性(缺一不可,也是谷歌浏览器的默认限制)，即加载后立即静音播...
js截取视频第一帧_学学javascript如何截取视频第一帧
weixin_39617484的博客
12-19 2038
JavaScript截取视频第一帧一、背景在企业资料的开发中，除了涉及到视频上传之外，还需要使用视频中的第一帧或者或许几帧作为视频封面展示。产生的问题：因此，JS截取视频第一帧的难点就此诞生，但是查阅了资料发现，网上提供的资料无外乎俩种，第一种是 wasm + ffmpeg 配合后端去截取，第二种是JS自行截取。优缺点也是显而易见的，第一种，配合成本比较高，而且不是很灵活；第二种可以满足一般条件下...
js获取视频第一帧
【03】的博客
07-17 4723
代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta ht
[转]截取视频文件第一桢的图片和转换视频格式文件为flv(支持文件格式:asf,avi,mpg,flv,3gp,mov,wmv)
sightboy的专栏
06-04 1176
前段时间写过一篇抓取视频文件中图片的帖子，如下痛并努力着－在asp.net中如何从视频文件中抓取一桢并生成图像文件 另外一种方法是采用ffmpeg解码器，来实现如功能。代码如下: public class CatchFlv    {       public CatchFlv()       {       }       /**//**//**////        /// @从视频文件截图
js 获取视频的第一帧
weixin_30867015的博客
08-25 539
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>capture screen</title></head><body><video id="video" controls="controls"><source src=...
js实现获取视频第一帧
weixin_43019353的博客
11-08 1280
js实现获取视频第一帧
Js截取视频vedio第一帧为图片
林中明月间丶
04-17 524
【代码】Js截取视频vedio第一帧为图片。
js捕捉video视频第一帧或指定帧的画面并绘制
weixin_41464806的博客
02-04 1707
原生JS实现捕捉video视频的第一帧或指定帧的画面作为视频封面，转化为base64格式并展示。
nodejs实现截取上传视频中一帧作为预览图片
10-18
Node.js实现截取上传视频中一帧作为预览图片的知识点包括以下几个方面： 1. Node.js环境的搭建：首先需要了解如何搭建Node.js的运行环境，包括Node.js的安装、基本命令的使用以及Node.js的包管理工具npm的使用。 2...
JS获取HTML video标签视频第一帧
莹莹同学
12-07 1884
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>capture screen</title> </head> <body> <video id="video" controls="controls"> <source src="1.mp4"> </video> <div id="output"&g.
js获取视频某一帧
jquerybootstrap的博客
03-06 849
【代码】js获取视频某一帧。
js上传视频获取第一帧截图
weixin_40394596的博客
07-05 1608
3.获取到dataURL后，一般在video.onloadeddata方法里进一步对dataURL做接下来的操作，video.onloadeddata方法有延迟，如果直接返回dataURL，或返回undefind。2.创建video标签，将视频url赋给src,然后再创建画布canvas，将视频的第一帧画到画布上，最后通过canvas.toDataURL('image/png')获取图片的base64文件流。1.获取视频的url,如果是file文件，先转成url。
js截取视频第一帧
最新发布
qiaolezi787的博客
06-08 486
使用canvas截取视频第一帧方法
js（ts）截取视频第一帧作为封面图
林中路
03-02 2196
有时候截取到的图片可能是黑屏、白屏、透明等，需要使用二进制数据进行判断，如果无效，则返回系统默认图片。，会导致如果是竖视频截取出来的封面图在横显示时会变形。这是防止截图结果为黑屏的关键一步。网络上其它文章的代码都直接读取。
使用JS截取视频的第一帧
qq_37103241的博客
09-20 441
使用Js截取视频的第一帧
js截取视频帧，任意一帧，解决第一帧空白问题
vayne_1的博客
04-20 1699
js截取视频帧，任意一帧，解决第一帧空白问题。
JS 怎么获取视频第一帧作为封面图？
湖北太米网络科技有限公司
11-06 1941
要获取视频的第一帧作为封面图，你可以使用HTML5的 <video> 元素和 JavaScript 来实现。下面是一个简单的步骤：在HTML中，创建一个 <video> 元素，并设置视频的路径或URL：<video id="myVideo" src="path/to/video.mp4" wi...
get两个js小技能——JS截取视频第一帧&图片转Base64
不愿意做鱼的小鲸鱼の博客
03-20 2225
JS截取视频第一帧&图片转Base64
js截取视频第一帧，点击后播放视频
essnbb的博客
10-13 306
js截取视频第一帧，点击后播放视频
js 截取视频第一帧 在ios获取不到
06-08
这可能是由于 iOS 系统对于视频第一帧的获取方式与其他操作系统不同引起的。在 iOS 中，需要使用 `AVFoundation` 框架来获取视频的第一帧。以下是一个简单的示例代码，可以用于从视频中获取第一帧： ```javascript function captureFirstFrameFromVideo(videoUrl, callback) { const video = document.createElement('video'); video.crossOrigin = 'anonymous'; video.src = videoUrl; video.onloadedmetadata = function() { const canvas = document.createElement('canvas'); canvas.width = this.videoWidth; canvas.height = this.videoHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); const imgData = canvas.toDataURL('image/png'); callback(imgData); }; } ``` 在这个函数中，我们创建了一个 `video` 元素，并将其设置为 `videoUrl`。然后，我们在 `onloadedmetadata` 回调函数中，获取视频的宽高信息，并创建一个 `canvas` 元素，将视频的第一帧绘制到画布上，并将画布数据转换为 base64 的图片格式，最终通过回调函数返回给调用者。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值