html5 video js 播放,H5播放HLS之videojs播放视频

一、简介

如果要让网页支持在所有浏览器上播放，就需要使用第三方的播放器。VideoJs是一个较好的播放器库，完全免费，不像JWPlayer一样需要付费才能使用一些高级功能。

videojs播放库是比较有名的一个播放库，它不仅支持hls也支持rtmp，不过如果是播放rtmp它最终也是通过flash插件完成的，我们暂时只看hls。

二、实现

如果使用videojs播放hls前端代码实现如下：

Title

id="my-video"

class="video-js vjs-big-play-centered"

controls

preload="auto"

width="640"

height="264"

data-setup="{}">

请升级您的浏览器之后在看该视频!

支持H5视频标签

经过测试videojs播放HLS延迟大概在8s左右，不过也是非常的流畅，如果要定制自己的播放器可以参考如下代码：

videojs自定义播放器

placeholder="input HLS Stream Address 注意不要含有空格" class="form-control">

提交

var d