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

  • 时间:
  • 浏览:1

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

  后后 浏览器使用的解码器也是H264的。后后 用户在本地都不想 观看的mp4视频上传后却无法正常播放,你这些 体验是相当糟糕的。

  不过转而一想,视频解码错误,drawImage最好的方式就报错,后后 写在try catch的话中,不就都不想 捕捉到哪天?看来还没到死路,可是我我 我 连像素点采样都省了,都不想 直接检测到了。于是乎代码就僵化 成了下面可是我我 我 :

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

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

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

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

  HTML5的<video>标签所支持的视频格式真是有限,mp4文件时可是我我H264编码的才行,若就有H264编码,在chrome下会不到声音没有画面,在FireFox下直接连声音也没有,而且控制台会显示警告:

  canvas读取图片像素点的能力

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

  首先想到的是video的API,video有onerror事件,而且此事件不到在src地址错误或或多或少意味着加载不到视频资源时触发,当加载到视频占据 解码错误时,何必 会触发。略蛋疼。没有看来按照标准的东西是无法检测到了,可是我我 时要另辟蹊径了。答案可是我我 我:

  你这些 最好的方式当然就有局限,下面是哪几个注意事项:

  既然无法从上传阶段阻止用户,没有退一步讲,在视频无法播放的后后 ,人们人们人们 希望都不想 检测到,而且给用户另一一一个提示“视频解码错误”,可是我我 我 他就不想有疑惑“我的视频为哪些地方无法播放呢?”。

乍一看这标题,有点硬吊炸天的赶脚,canvas跟<video>能哪些地方地方联系?不过请放心我就有标题党。事情是可是我我 我 的:

  该最好的方式纯属被委托人想出来的,还有诸多不完善之处,遇到同样疑问的同学都不想 试试你这些 思路~