Videojs 项目开发使用解析

最近项目开发中包含了视频业务,之前架构设计用的是ckplayer插件,但是无法正常播放切片后的m3u8格式的文件,因为有app端视频播放,ios必须h5,后来我们采取了videojs.虽然videojs很强大,但是他的官方文档暂时没有中文版本,一些问题百度也无法找到解决方案.我们就简单的把开发中遇到的问题整体一下.方便大家后期解决问题.

1.首先是文件的引用

<script src="<%=requestContext %>/video-js-6.2.6/video.min.js"></script>
<script src="<%=requestContext %>/video-js-6.2.6/videojs-flash/videojs-flash.min.js"></script>
<script src="<%=requestContext %>/video-js-6.2.6/plugins/hls/videojs-contrib-hls.min.js"></script>
<script src="<%=requestContext %>/video-js-6.2.6/lang/zh-CN.js"></script>

<!-- Set the location of the flash SWF -->
<script>
  videojs.options.flash.swf = '<%=requestContext %>/video-js-6.2.6/videojs-flash/video-js.swf';
</script>

2.video标签

<video id="video1" class="video-js vjs-default-skin vjs-big-play-centered" style="width: 100%;height: 100%;" poster="<%=requestContext %>/images/player.jpg">
</video>

1) poster属性:展示视频的封面,如果需要展示视频第一帧,这个属性不定义就可以,但是app不兼容这个属性,找了好久,暂无解决办法,但是pc可以.
2)vjs-big-play-centered:videojs:一个class,因为videojs播放按钮默认在左上角,加上这个class就居中了.
3)video初始化:

<script>
videojs('video1',{
    "autoplay" : false,
    "controls" : true,
    "techOrder" : [ "html5", "flash" ],
    //"width":"100%",
    //"height":"100%",
    "sources" : [ {
        src : "${video1.videofile.videopath}",
        type : "${video1.videofile.mimetype}"
    } ]
}); 
</script> 

这段初始化代码是videojs用来初始化video的,建议放在页面底端.因为放在上面获取video的id时,video还没加载.

"sources" : [ {
        src : "${video1.videofile.videopath}",
        type : "${video1.videofile.mimetype}"
    } ]

sources定义的视频的路径和解析方式:
a. src :你的视频文件地址
b. type :视频类型 eg:video/mp4(如果视频是转码格式,一定要换成转码的类型eg:application/x-mpegURL)

3.不刷新页面更换视频播放源

项目中可能会有不能刷新页面 但是视频需要改变

var videojsplay=videojs('video1');
videojsplay.src({src: path,
     type: mimetype});
videojsplay.play();

可以通过ajax获取,play()是视频播放方法,如果切换了视频源可以直接播放.

4.尽量不要改videojs样式或者js源码,会导致一些奇葩bug.

暂时先写这么多吧,有问题可以留言问我.上一张app播放图,哈哈哈