全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[江门seo公司立找久澳]学学javascript如何截取视频第一帧

  

 

  相关学习推荐:javascript视频教程

  

JavaScript截取视频第一帧

一、背景

 

  在企业资料的开发中,除了涉及到视频上传之外,还需要使用视频中的第一帧或者或许几帧作为视频封面展示。

  

产生的问题□◁•▲:

 

  因此,JS截取视频第一帧的难点就此诞生,但是查阅了资料发现□○,[来宾seo公司认准久澳]结构性伪类选择器—nth-child实现彩色表格案例(代码实,网上提供的资料无外乎俩种•★,第一种是 wasm + ffmpeg 配合后端去截取,第二种是JS自行截取。优缺点也是显而易见的▲◁★,第一种,配合成本比较高,而且不是很灵活◇=;第二种可以满足一般条件下的使用,但是会有兼容问题(IE再见)以及截取黑屏的问题。

  

二、wasm + ffmpeg

 

  这种方式优缺点也是显而易见的,配合成本比较高★●,而且会造成web内存的急剧飙升,但是支持的视频种类已经截取的帧数是很灵活的;由于涉及到服务端•=•★,具体可以参考 wasm + ffmpeg 截取视频…••…。

  

三、JavaScript 前端截取

 

  这里前端截取的话就需要了解 video、canvas 标签的兼容性和响应事件了。而且对IE可能不是那么友好=★。

  

1●☆◆. canvas的知识这里不做过多补充,下面主要看一下video标签的响应事件有哪些▽…:

 

 

  执行结果

  

 

  根据顺序▪=•,第一个被触发的竟然是 timeupdate 事件,按设想来说,最先执行的应该是 loadedmetadata,元数据加载完毕。关于这一点▪-,在MDN上没有明确的说明,但是可以推理一下=■◇●:

  

 

  当 currentTime 更新时会触发 timeupdate 事件

  

 

  结论●☆-:虽然最先触发,但是此时视频文件尚未加载■•,截取的是 canvas 的无内容本身。注:timeupdate 事件根据使用的系统不同,每秒触发4-66次,且由于触发频率高,单位过小(毫秒级别)▲=▲…,事件响应需要延迟等原因,无法完全精准的控制。

  

  •  

      loadedmetadata 上文提到,元数据加载完毕之后即触发,但数据中并不包括视频文件本身。js教程结论◇=:如果视频文件较大★■•▲,加载时间较长,仍然无法截取到已加载的第一帧▽=。补充◇△:通过 URL.createObjectURL()方法能够基本做到无察觉,但并不保险。

      

  •  

      loadeddata 当前帧数(第一帧)加载完毕触发,没毛病◇☆。结论:可用◁●●。补充:万一第一帧是黑屏想用下一帧怎么办,对不起•▼•,余下帧数加没加载完不在它的考虑范围之类,这个事件不管。

      

  •  

      canplay 视频能够开始播放时触发,也就是根据上传的视频帧数决定加载多少帧(24/25/30/60等等)后满足播放画面后触发…△▽。总结-△-:因为加载相对于 loadeddata的事件来说更多(多一丢丢)△◆△,总体可行…-☆△。补充:通过控制 currentTime可以满足(但不可能是第二帧那么准确)☆□▲,可以看做“当前播放帧•▼△”。

      

  •  

      play 开始播放时才会触发,和上传快速截取的需求不是很符合。

      

  •  

      waiting 已播放但下一画面没缓冲好时触发,适合插播小广告。

      

2. 了解上面的响应事件之后,[江门seo公司立找久澳]让我们来看一下接下来截取操作★△◁□:

 

 

  上面的的结果是什么呢▪▼▼◁?

  

 

  可以看到已经很成功的截取到了视频的第一帧◆▷,那么到此阶段★▽,其实已经基本实现了需求▲▽▪,但是图片是否是有效的,这个还未可知,所以需要我们进一步去判断△★☆。

  

3. 第一帧是否有效

 

  其实◁•▼•,截取到的第一帧图片▪◁,有些时候由于视频的质量不佳或者一些其他因素影响,截取到的图片往往不是很符合预期,一直与会出现纯黑的图片=○■,透明图片,白色图片等等无效图片。因此,我们需要进行一下图片有效性的识别。
那么◆▲●,怎么去识别图片的有效性呢?

  这时候-◁,你就需要认识一个新属性了□•△■:Uint8ClampedArray

  

 

  Uint8ClampedArray(8位无符号整型固定数组) 类型化数组表示一个由值固定在0-255区间的8位无符号整型组成的数组◆△▪▲;如果你指定一个在 [0,255] 区间外的值,它将被替换为0或255▼◆;如果你指定一个非整数,那么它将被设置为最接近它的整数■•○▽。(数组)内容被初始化为0□■■。一旦(数组)被创建,你可以使用对象的方法引用数组里的元素□●●,或使用标准的数组索引语法(即使用方括号标记)。

  

 

  如果对 Uint8ClampedArray 感兴趣△●,可以异步这里进一步研究 Uint8ClampedArray。

  你是不是发现了什么?0~255这个是不是常见的数值,颜色的十六进制对应的数值。好,那么■○,接下来就是按照我们所思考好的去实现◁◆,看看是不是这么一个原理。

  代码是实现了,那么结果呢▪…•-,我这里分别使用白色图片,透明图片◆▲•☆,黑色图片来对照一下,拿到的结果究竟是不是和我们所想象的一直的:
首先我们来看一下透明图片:

  

  可以看到,结果数组里面▽□,全部是 0■□▷▽;

  白色图片:

  

  哎呦=-,全是255,那么黑色就应该全是0了▲★•▼,别急=○△,让我们看一下

  黑色图片:

  

  出现了意想不到的数字,238,这是偏向255白色的色值,为什么会这样呢?其实是因为白色和透明色没有过度•-▪○,而黑色是过度的,就是在canvas绘制的时候会出现这种问题,但是是可以忽略不计的。

  知道了这三者的色值,那么接下来的判断也就好办了,直接在加一个条件就好了

  

  为什么是200 和 0 呢□…?其实这俩个值你们可以根据实际情况去判断合理范围,200 对应的色值是#c8c8c8,是灰色○…,0是透明色,所以在这里就判断是无效图片了●▽○•。只要brr数组里面没有值,Vue.js就说明是无效图片◆-。

  那么实际情况如何呢?再来一张实际的对比图:

  

  可以看到,brr里面是有值的◆◁,而且还是大量的,所以这正图片就是有效图片。

  

4. 最后

 

  JavaScript截取视频第一帧就已经完毕了,如果还想优化就是针对无效图片的时候,使用默认图片展示即可。

  

四◁○▲、总结

 

  JavaScript截取视频第一帧=●□○,过程比较繁杂,而且涉及到很大量的数据循环,会造成一定的内存增长,但是确确实实能解决这个问题,并且已经已用到了企业资料中,其中使用了一个取巧优化的办法,只有brr数组有一个值被push进去▽•,就直接break,这样可以极大的优化性能•□。如果大家还有更好的解决办法,可以多多交流!

  

 

  想了解更多编程学习,敬请关注php培训栏目▽◇!
 

  

 

  以上就是学学javascript如何截取视频第一帧的详细内容,更多请关注久澳传媒编程栏目其它相关文章=□!

[江门seo公司立找久澳]学学javascript如何截取视频第一帧

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。