javascript - 用户上传的视频放在CDN服务器上，如何获取视频的第一帧并保存为图片？

问题描述

问 题

需求：将视频的第一帧保存为图片，作为视频列表的缩略图使用

经查阅尝试使用canvas来绘制画布，但是由于我们的视频都是放在CDN服务器上，而canvas使用了没有权限的跨域图片时canvas.toDataURL()会报错，报错信息如下：
"Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported."

已经加上 img.crossOrigin = "Anonymous";依然还是无效，原因是视频在服务端没有办法设置相应的权限。

由于使用了第三方插件lightGallery来展示视频图片列表，所以需要一个缩略图传进去以调用，视频也不能放到本地使它同域，急求各位大神给出解决方案。

解决方案

开发时，尽可能用成熟的功能服务，如
https://www.aliyun.com/product/vod
自带cdn、转码等

自己做的话，比较靠谱的是在服务器上下载，用ffmpeg来截图。

这篇关于javascript - 用户上传的视频放在CDN服务器上，如何获取视频的第一帧并保存为图片？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！