当<video>不支持播放某种视频格式时如何做出提示?

2,584 阅读2分钟

前言

众所周知,<video>标签支持的格式只有三种mp4oggwebm,并且需要特定的编码才能在浏览器中播放。否则只会出现一个无资源的播放器。

开发的项目中允许用户上传各类视频(后台未进行转码操作),并可以在列表中需要对应的视频,因<video>支持的视频格式有限,所以在预览不支持格式时,为了用户体验需要提示用户下载到本地再进行播放。

解决方案

对于面对搜索引擎开发者的我,经过一系列的搜索,得到的结果有两种:

  1. 对视频进行转码
  2. <video></video>中加入提示文字(主要针对不支持H5 video的浏览器)

都不是我想要的,然后就翻了一下文档,得到以下几种方案:

canplaytype 方法

文档

canPlayType() 方法浏览器是否能播放指定的音频/视频类型。 canPlayType() 方法可返回下列值之一:

  • "probably" - 浏览器最可能支持该音频/视频类型
  • "maybe" - 浏览器也许支持该音频/视频类型
  • "" - (空字符串)浏览器不支持该音频/视频类型

通过视频类型以及编码格式可以判断是否支持播放。

这种方案使用起来比较死板,比如将一个本可以播放的mp4格式视屏更改后缀为avi,或者将一个avi改为mp4,这种情况就无法正确判断了。

canplay 事件

文档

如果视频可以播放才会触发此事件。

使用得当,这是比较好的一种解决方案。

loadstart 事件与readyState 属性

loadstart文档

readyState文档

当浏览器开始寻找指定的音频/视频时,会发生 loadstart 事件。

因为在这个事件触发时readyState的值会一直是0,所以这里可以加个延时器,然后根据readyState的值进行判断。