天天看點

從零搭建直播聊天平台(三.video.js)從零搭建直播聊天平台(三.video.js)

從零搭建直播聊天平台(三.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,通路該頁面。效果如下:

    從零搭建直播聊天平台(三.video.js)從零搭建直播聊天平台(三.video.js)

ps:如果頁面出現No compatible source was found for this media,并且控制台報ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) 的錯。修改方式如下:

從零搭建直播聊天平台(三.video.js)從零搭建直播聊天平台(三.video.js)

選擇始終允許,并且重新整理頁面,搞定、

小結:這一篇隻是寫到了video.js的基本使用,二次開發可自行檢視api,關于video的深一步探索,會在進階篇中寫到呦。

繼續閱讀