全面了解videojsrtmp插件

一、簡介

videojsrtmp是一個基於dailymotion插件的video.js插件，它允許使用RTMP協議播放視頻。它支持多種格式的視頻文件，包括FLV、MP4、M4V、mov等。

它使用了video.js庫的核心和常用功能，並通過擴展來繼承和覆蓋它們，以在支持Flash的瀏覽器中支持RTMP流的播放。

二、使用方法

1、引入video.js庫和videojsrtmp插件

<link href="https://vjs.zencdn.net/7.8.3/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.8.3/video.min.js"></script>
<script src="dist/videojs-flash.js"></script>
<script src="dist/videojs-contrib-hls.js"></script>
<script src="//cdn.dailymotion.com/cdn/manifest/videojs/videojs-dailymotion.min.js"></script>
<script src="dist/videojs.rtmp.min.js"></script>

2、創建視頻播放器

<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264">
 <source src="rtmp://example.com/my-video" type="rtmp/flv">
 <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
</video>

3、初始化videojsrtmp插件

var player = videojs('my-video');
player.rtmp({
  // RTMP流地址
  src: 'rtmp://example.com/my-video',
  // 支持的格式
  // 現在已經實現了flv和mp4的支持
  type: 'rtmp/flv'
});

三、常用配置

1、rtmp桶相關配置

player.rtmp({
    src: 'rtmp://example.com/stream/my-video',
    // RTMP桶所在的位置
    rtmp: {
        // 連接參數
        params: {
            // 固定寫法
            SAV1579LEN: 36,
            // 其他參數
            // 可以通過debug中查看
        },
        // 桶中的流名稱
        bufferName: 'mp4:my-video'
    },
    type: 'rtmp/mp4'
});

2、flash相關配置

player.rtmp({
    src: 'rtmp://example.com/my-video',
    // flash版本號
    swf: 'dist/plugin/swf/flash.swf',
    // 支持的flash插件版本號
    flashVersion: '9.0.0',
    // 顯示flash的位置，可以使用id和className來指定
    flashSrc: 'dist/plugin/swf/flash.swf',
    // flashvars，用來動態地設置flash參數
    flashVars: {
        // 可以設置rtmpSearchPattern和rtmpConnectionConfig等
    },
    type: 'rtmp/flv'
});

3、hls相關配置

player.rtmp({
    src: 'rtmp://example.com/my-video',
    // 兼容性模式
    hls: {
        withCredentials: true
    },
    type: 'rtmp/hls'
});

四、拓展應用

1、使用videojsrtmp實現推流

video.js-rtmp包中也支持推流。需要使用videojs.w3c.xhr.js和視頻編碼器（如flv.js）。

var player = videojs('my-video');
player.w3c = true;
var encoder = new flvjs.createPlayer({
    type: 'flv',
    isLive: true,
    'url': 'rtmp://example.com/stream/my-video'
});
encoder.attachMediaElement(player.el().firstChild);
encoder.load();
encoder.play();

2、使用videojsrtmp實現直播彈幕

使用websocket和videojsrtmp插件，可以實現類似bilibili的彈幕效果。首先需要通過websocket連接到彈幕服務器，然後通過videojs事件監聽器（playing，pause，ended等）來控制彈幕的顯示和隱藏。

var evt = [
    'VideoPlaying',
    'VideoPause',
    'VideoEnded'
];
var player = videojs('my-video');
player.rtmp({
    // 視頻地址
    src: 'rtmp://example.com/my-video',
    // 視頻類型
    type: 'rtmp/flv',
    // 監聽事件
    events: evt,
    // 自定義事件處理函數（顯示/隱藏彈幕）
    customEventHandler: function(e) {
        switch (e.type) {
            case 'VideoPlaying':
                // 顯示彈幕處理函數
                break;
            case 'VideoPause':
                // 隱藏彈幕處理函數
                break;
            case 'VideoEnded':
                // 隱藏彈幕處理函數
                break;
            default:
                break;
        }
    }
});

五、總結

videojsrtmp作為一款優秀的video.js插件，可以優雅的支持RTMP協議，讓我們在不用擔心瀏覽器不支持RTMP流的情況下，在網頁上播放視頻。它的使用方法簡單易懂，支持多種配置，能夠滿足各種應用的需求，具有很高的可定製性。