玩转HTML5播放器从无缝切换和节省流量说起

前端同学要使用 HTML5 播放器视频，必然会使用 video 标签，不过大多数同学只是使用了较简单的功能，其实它本身拥有不凡之力有待我们发现。

首先，我们先来看下 video 最基础的用法：

- 使用 src 属性

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
    你的浏览器不支持 <code>video</code> 标签。
</video>

- 使用 source 标签

<video controls>
   <source src="foo.ogg" type="video/ogg">
   <source src="foo.mp4" type="video/mp4">
   Your browser does not support the <code>video</code> element.
</video>

这是 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video) 关于 video 给出的基本用例。在这里我们简单介绍下两种方法的不同，src 只能赋予 video 一个播放地址，当浏览器不支持这种视频格式的解码时就会出现错误，导致视频播放失败。为了解决这个问题才有了 source 标签，利用多个 source 标签引入不同格式的视频，从上到下解析直到遇到看上述代码当浏览器不支持 ogg 格式时，浏览器会自动播放 foo.mp4。

### 实用技巧

我们会发现使用 video:src 属性播放视频的时候会经常出现播放失败，我们该怎么做能提升视频播放的质量？

这种情况一般都使用 cdn，为了更保险一般还会将不同的 cdn 厂商分为主用 cdn 和备用 cdn。那么问题来了，我们怎么利用 video 本身的特性并结合 cdn 保证我们的视频播放质量？

<video controls>
  <source src="//a.com/main.mp4" type="video/mp4">
  <source src="//b.com/backup.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>