前端頁面播放 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);

　　flv.js 使用方法：

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

　　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();

 

歡迎各位前輩評論指教！！！