IT俱乐部 HTML5 Canvas获取视频第一帧缩略图的实现

Canvas获取视频第一帧缩略图的实现

发布: 2024年 9月 21日 134阅读

记录下一个疑问，最近在重新看canvas做点Demo这样，时间是写在2019年11月5日，以后要是没有这个问题了，以W3C更新的为标准，这个只是参考尝试着在canvas中显示视频第一帧的时候碰上的问题：在Chrome中，用 video.addEventLisener(“loadeddata”,func)、 video.onloadeddata = func无法在函数中获取到未预加载的视频的第一帧的图片。同样的代码在Firefox中未预加载的视频可以获取到第一帧，并且能够渲染到canvas中。以下都是不进行预加载的情况下运行的。

要是不能运行了就在评论里说下，我是从写的一个Demo里截下来一部分的=。=

HTML代码片段


 


 
  

						

Tag：Canvas   视频   缩略图   



						
					


相关文章







HTML5 Canvas 破碎重组的视频特效的示例代码


							这篇文章主要介绍了HTML5模拟齿轮动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学
 2019-09-24 










前端canvas动画如何转成mp4视频的方法


							这篇文章主要介绍了前端canvas动画如何转成mp4视频的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一
 2019-06-17 










canvas像素点操作之视频绿幕抠图


							这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
 2018-09-11 










video结合canvas实现视频在线截图功能


							这篇文章主要介绍了video结合canvas实现视频在线截图功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
 2018-06-25 










canvas绘制视频封面的方法


							这篇文章主要介绍了canvas绘制视频封面的方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
 2018-02-05 









详解基于canvas的视频遮罩插件


							这篇文章主要介绍了详解基于canvas的视频遮罩插件，详细介绍了如何为一个视频添加一个覆盖物，非常具有实用价值，需要的朋友可以参考下
 2018-01-04 









canvas与html5实现视频截图功能示例


							本篇文章主要介绍了canvas与html5实现视频截图功能示例，非常具有实用价值，需要的朋友可以参考下。
 2016-12-15 








						
					
					

最新评论

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/html5/13698.html

10赞

标签:canvas 第一缩略图获取视频