全面了解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流的情况下，在网页上播放视频。它的使用方法简单易懂，支持多种配置，能够满足各种应用的需求，具有很高的可定制性。