让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(需翻墙)

转自http://www.amoa400.com/html5-video-progressive/

  • 4
    点赞
  • 1
    评论
  • 7
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值