从零搭建直播聊天平台(三.video.js)
video.js可以自动在flash和html5播放器之间进行切换,可以兼容到IE8,由于是开源的所以还可已进行二次开发,是一个不错的选择。
video.js的使用
video.js有两种方式使用,一种是使用他官方线上的文件来加载,第二种是下载相关文件放在自己的服务器上使用。该项目是使用后者,版本为5.8.8
下载video.js-5.8.8.zip
下载地址:https://github.com/videojs/video.js/releases/tag/v5.8.8在html中引入
引入video-js.css、video.js、video-js.swf,它们所在位置为/video.js-5.8.8/dist下
<head>
<link href="http://192.168.1.117:8081/flash/videojs/video.js-5.8.8/dist/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="http://192.168.1.117:8081/flash/videojs/video.js-5.8.8/dist/ie8/videojs-ie8.min.js"></script>
<script src="http://192.168.1.117:8081/flash/videojs/video.js-5.8.8/dist/video.js"></script>
<script type="text/javascript">videojs.options.flash.swf = "http://192.168.1.117:8081/flash/videojs/video.js-5.8.8/dist/video-js.swf";</script>
</head>
使用video标签
在html中使用video标签,其中source中src就是要播放的视频地址,type为视频的类型,可以支持大部分类型,当然也可以播放本地视频。
下列中给出了一个网上可以用的测试地址:rtmp://live.hkstv.hk.lxdns.com/live/hks
poster为初始化页面时的图片.
<body>
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="http://192.168.1.117:8081/zsj-data/files/20170918155226_eastmind.jpg" data-setup="{}">
<source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type='rtmp/flv'>
<!-- <source src="rtmp://youIp:1935/live/" type='rtmp/flv'> -->
</video>
</body>
放在tomcat中测试
将此html放在tomcat中,启动tomcat,访问该页面。效果如下:
ps:如果页面出现No compatible source was found for this media,并且控制台报ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 的错。修改方式如下:
选择始终允许,并且刷新页面,搞定、
小结:这一篇只是写到了video.js的基本使用,二次开发可自行查看api,关于video的深一步探索,会在进阶篇中写到呦。