從零搭建直播聊天平台(三.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的深一步探索,會在進階篇中寫到呦。