videojs系列之一-建立视频

为什么要写这个系列的videojs文章

    最近在做PC端的视频播放器, 主要是播放RTMP直播流, 选了好久, 最终选定videojs. 在开发这个视频组件的时候, 遇到很多问题, 其中官网的API又非常不给力, 根本看不出啥来, 而国内对于videojs的文章也有, 不过不太成体系, 主要讲的都是些最基本的应用, 对问题的解决办法少之又少, 最后Google+自己脑洞, 基本上把所有问题都解决了, 希望把这个过程记录下来, 供朋友们参考.

videojs简介

    videojs是一个在PC端播放视频的一个开源组件, 主要的特色就是可以播放rtmp流文件(也可以在PC端播放HLS文件, 但是需要第三方扩展, 话说回来, rtmp的延迟要比HLS要好的多, 能使用RTMP, 当然就不会选择HLS), 当然播放rtmp必须依赖flash, 这些已经在videojs里面已经封装好了, 我们只要调用接口就可以完成, 好让我们开始第一个videojs应用.

建立最简单的rtmp播放器

第一步: 只要在文件头部引用

<script src="http://vjs.zencdn.net/5.8.8/video.js"></script>

第二步: 新增加DOM的video标签

<video id="myVideo" autoplay controls preload="auto" width="640" height="360">
    <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks"></source>
</video>

注: source标签里面放的是要播放的RTMP流地址, 其中rtmp://live.hkstv.hk.lxdns.com/live/hks为香港卫视的流地址, 供大家测试使用

第三步: 增加初始化

videojs("myVideo")

第四步: 查看效果

第五步: 惯例, 上码

videojs播放rtmp视频地址-源码