使用canvas检测HTML5视频解码错误

  • 时间:
  • 浏览:1

  当我怀着激动的心情结束了了了了测试时,发现事实真否是想象的那样。Chrome下,当两个多视频无法解码时,drawImage最好的依据 直接无法执行,会报错。完了,美好的想法泡汤了。。。

本文转自吕大豹博客园博客,原文链接:http://www.cnblogs.com/lvdabao/p/3414038.html,如需转载请自行联系原作者

  在1秒后的绘制图片动作会捕捉到异常。没想到,竟然曾经成功了!

  HTML5的<video>标签所支持的视频格式虽然有限,mp4文件时需是H264编码的才行,若否是H264编码,在chrome下会这么 声音这么 画面,在FireFox下直接连声音也这么 ,若果 控制台会显示警告:

  既然无法从上传阶段阻止用户,这么 退一步讲,在视频无法播放的前一天,我们希望时需检测到,若果 给用户两个多提示“视频解码错误”,曾经他就不想有疑惑“我的视频为那此无法播放呢?”。

  该最好的依据 纯属人及 想出来的,还有诸多不完善之处,遇到同样那此的难题的同学时需试试这种思路~

乍一看这标题,不得劲吊炸天的赶脚,canvas跟<video>能有那此联系?不过请放心我否是标题党。事情是曾经的:

  这种最好的依据 当然否是局限,下面是2个注意事项:

  我尝试在文件上传阶段进行检测,然而HTML5的FILE API能力也是有限的,这么 获取文件名称、大小、MIME类型,对于视频的编码却无法检测到。

  不过转而一想,视频解码错误,drawImage最好的依据 就报错,肯能写在try catch一段话中,不就时需捕捉到多会儿?看来还没到死路,曾经连像素点采样都省了,时需直接检测到了。于是乎代码就复杂成了下面曾经:

  前些天看完前端手记的这篇文章印象颇深,http://www.cssha.com/video2txt-canvas。利用canvas读取图片像素点,进而转化为文本图片。更厉害的是canvas的drawImage最好的依据 时需传入视频,获取到视频某一帧的像素点。于是两个多想法在脑中萦绕,解码错误的视频是这么 画面的黑屏,我想用canvas绘制视频,根据所绘制的内容来判断画面否是在动,遂想到如下思路:

  canvas读取图片像素点的能力

  肯能浏览器使用的解码器也是H264的。肯能用户在本地时需观看的mp4视频上传后却无法正常播放,这种体验是相当糟糕的。

  首先想到的是video的API,video有onerror事件,若果 此事件这么 在src地址错误或一些是因为加载这么 视频资源时触发,当加载到视频指在解码错误时,并不想触发。略蛋疼。这么 看来按照标准的东西是无法检测到了,就是时需另辟蹊径了。答案就是:

  局限归局限,先把想法写成代码试试,于是有如下代码: