在上一篇文章讲到,在angular中使用ckPlayer播放器,由于ckPlayer自身插件的问题不能满足我的需求,那么在这一篇,我将会讲解如何在angular中使用video.js播放rtmp视频。
Video.js是一款web视频播放器,支持html5和flash两种播放方式。更有自定义皮肤,插件,组件,语言还丰富的选项配置。值得注意的是在最新版的Video.js,分为video.js和videojs-flash两个包,一定要都下载下来,才能播放rtmp格式的视频流。
Video.js的引入方式
-
index.html中引入
1
2
3
4
5<link href="https://vjs.zencdn.net/7.8.2/video-js.css" rel="stylesheet" />
<script src="//i2.wp.com/vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
<script src="//i2.wp.com/cdn.jsdelivr.net/npm/videojs-flash@2/dist/videojs-flash.min.js"></script>
2.在angular.json中引入,网络是不稳定的因素很多,还是比较建议下载文件到本地
(1)把解压后的包文件放到assets文件下
(2)在angular.json中引入文件,效果等同于在index.html中用script标签引入
(3)在src文件夹下建一个typings.d.ts文件,全局声明变量
1 | declare var videojs: any; |
(4)在播放页面使用Video.js
1 2 3 4 5 6 7 | <video id="myVideo" class="video-js vjs-big-play-centered video" controls preload="auto" data-setup='{}'> </video> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | createVideo() { let options = { controls: 'control', preload: 'auto', autoplay: true, controlBar: {//这里是关于控制栏的配置项 volumeBar: false, currentTimeDisplay:false, timeDivider:false, durationDisplay:false, remainingTimeDisplay:false, volumePanel: false, progressControl: false, disablePictureInPicture: true }, sources:[ // 视频源 { src: 'rtmp://58.200.131.2:1935/livetv/hunantv', type: 'rtmp/flv' } ] }; let id = 'myVideo'; let ele = this.el.nativeElement.querySelector('#' + id); if(!ele) { return false; } this.videoFlash = videojs(ele, options , function() { setTimeout(function () { that.videoFlash.play(); }, 2000); }); } |
同样在播放视频时,一定要在ngAfterViewInit生命周期里调用,太早调用,dom元素没有挂载成功,会获取不到播放容器也会造成视频播放失败。
在接下来的篇章里,我会继续讲述关于rtmp视频流播放的更多细节内容,希望大家多多关注