前端页面播放 rtmp 流与 flv 格式视频文件

技术 ：angular/cli , html5 , typescript , scss ,es 6 ...

项目类型：直播视频与视频回放

使用到 插件 ： videojs + ckplayer

遇到的问题：

　　1. 一开始使用 flv.js 插件播放flv格式类型，遇到的问题 40M 以下可以播放出来，超过一定视频文件大小就会出现异常。

　　解决方案：使用 ckplayer 插件代替flv插件

　　ckplayer 使用方法：

         var videoObject = {
             container: '#name' , //容器的ID或className
             variable: 'player',//播放函数名称
             flashplayer: true,
             video: [//视频地址列表形式
                 ["url链接", 'video/flv', '中文标清', 0]
             ]
         };
         var player = new ckplayer(videoObject);

ckplayer

　　flv.js 使用方法：

 if (flvjs.isSupported()) {
             const flvPlayer = flvjs.createPlayer({
                 type: "flv",
                 url: url
             });
             flvPlayer.attachMediaElement(videoElement);//videoElement：h5 video 元素
             flvPlayer.load();
             flvPlayer.play();
     }

flv.js

　　2.videojs 在创建播放器的时候每次都要实例化并且加载新的播放器，不然播放会没有效果；

　　使用方法：

 html:
 <video id="{{ obj }}" class="video video-js vjs-big-play-centered" preload="auto" data-setup="{}" autoplay controls="controls">
           <source [src]="safeUrl" type='rtmp/flv'>
         </video>

 -----------------------------------------------------------------------------------------
 实例化：
 var videos = document.getElementsByTagName('video');//获取所有的h5元素 video
         for (i = 0; i < videos.length; i++) {
           var video = videos[i];
           if (video.className.indexOf('video-js') > -1) {
             videojs(video.id).ready(function () {//实例化播放器
             });
           }
         }

 -----------------------------------------------------------------------------------------
 单击更换播放链接：
 var _video = videojs("video_index_1");
             _video.src(url);
             _video.play();

videojs

欢迎各位前辈评论指教！！！