前言
众所周知,<video>
标签支持的格式只有三种mp4
、ogg
、webm
,并且需要特定的编码才能在浏览器中播放。否则只会出现一个无资源的播放器。
开发的项目中允许用户上传各类视频(后台未进行转码操作),并可以在列表中需要对应的视频,因<video>
支持的视频格式有限,所以在预览不支持格式时,为了用户体验需要提示用户下载到本地再进行播放。
解决方案
对于面对搜索引擎开发者的我,经过一系列的搜索,得到的结果有两种:
- 对视频进行转码
- 在
<video></video>
中加入提示文字(主要针对不支持H5 video的浏览器)
都不是我想要的,然后就翻了一下文档,得到以下几种方案:
canplaytype 方法
canPlayType() 方法浏览器是否能播放指定的音频/视频类型。 canPlayType() 方法可返回下列值之一:
- "probably" - 浏览器最可能支持该音频/视频类型
- "maybe" - 浏览器也许支持该音频/视频类型
- "" - (空字符串)浏览器不支持该音频/视频类型
通过视频类型以及编码格式可以判断是否支持播放。
这种方案使用起来比较死板,比如将一个本可以播放的mp4
格式视屏更改后缀为avi
,或者将一个avi
改为mp4
,这种情况就无法正确判断了。
canplay 事件
如果视频可以播放才会触发此事件。
使用得当,这是比较好的一种解决方案。
loadstart 事件与readyState 属性
当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。
因为在这个事件触发时readyState
的值会一直是0
,所以这里可以加个延时器,然后根据readyState
的值进行判断。