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

xiaoxiao2021-02-28  12

从零搭建直播聊天平台(三.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的深一步探索,会在进阶篇中写到呦。

转载请注明原文地址: https://www.6miu.com/read-2000097.html

最新回复(0)