让html5视频支持渐进式下载的播放

随着HTML5大火，HTML5视频也已经广泛应用于各类视频网站，比如说Youtube和Hulu等都提供了HTML5的播放方式，但国内还比较少见。

相对于使用Flash播视频，采用HTML5播放，不仅流畅的多，而且性能有很大提升，这对提高用户体验有很大的帮助。

所谓渐进式下载（Progressive Downloading），就是将一个完整的视频文件，切分成小的片段，然后播放器通过HTTP一个一个的下载，再进行播放。现在国内外的所有视频网站，几乎都采用这种方式。

渐进式下载相对于传统下载整个视频文件播放的方式有很多优点：

1、节约资源。如果一个用户只想看某个视频的几十秒内容，或者说看了一半关了，如果是提供整视频下载播放，那后面没有看的内容就被白白浪费掉了，带宽很贵啊。但渐进式下载可以很容易的控制，播一点，下一点，节约资源。

2、防盗。如果是提供整视频下载播放，那用户几乎很容易就可以把视频拖走了。但渐进式下载就相对麻烦很多，首先用户要收集每个视频的地址，下载之后还要把它们拼接起来，可以有效的防盗。

那么现在问题来了，HTML5默认是不支持渐进式下载的，如何实现呢？

有人或许会尝试过，用JS监控视频的播放，当前一个视频片段播完之后，立刻删除掉这个Video标签，并创建下一个Video标签并播放。看起来可行，但现实是残酷的，这样做的话，播起来会有明显的延迟，是不能接受的。

如果大家翻墙看过Youtube的视频的话，就会发现Youtube是默认采用的HTML5播放器，监听网络流的话，会发现它也使用了渐进式下载的方式。经过仔细观察，可以看到它使用了Media Source Extension这个新的特性，它支持用JS操作视频流，这样就可以做到平滑的拼接各个视频片段，毫无延迟。但有一点比较遗憾，这个新特性只在Chrome和IE 11(win8)上有效，其它浏览器都不默认支持，但可以装扩展。

所以，如果要在实际环境里应用HTML5渐进式播放视频的话，目前还必须配有Flash播放器，当用户支持HTML5的时候使用HTML5，否则降级到Flash。

目前Github上已经有比较好的现成解决方案了，详见Video.JS。支持自动降级，支持渐进式下载，支持HLS等等。

P.S. 去看看你的浏览器是否支持HTML5视频渐进式播放，https://www.youtube.com/html5（需翻墙）