前段播放 流媒体(RTMP,RTSP,HLS)

前言

最近项目须要流媒体的播放，后端一共提供了 三种流数据(RTSP,RTMP,HLS),在不一样的场景可能会使用到不一样方式播放，就须要作到适配， 支持全部的流数据播放。花了一段时间研究，在这里和你们分享一下，还有些遗留问题，看你们有没有好的方法。

RTSP

简介

这种协议流数据前段播放，没有特别好的解决方法，须要在本机装一个vlc 插件，依靠这个插件才能让 RTSP 协议 在网页上能播放，可是目前高版本的 Chrome 浏览器不支持 NPAPI 插件，也就是说高版本的 Chrome 浏览器仍是不能播放（46 以上的版本都不行）。

html code

<object type='application/x-vlc-plugin' id='vlc' width="200" height="500" events='True' pluginspage="http://www.videolan.org" codebase="http://downloads.videolan.org/pub/videolan/vlc-webplugins/2.0.6/npapi-vlc-2.0.6.tar.xz">
     <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />
     <param name='volume' value='50' />
     <param name='autoplay' value='true' />
     <param name='loop' value='false' />
     <param value="transparent" name="wmode">
     <embed id='vlc' wmode="transparent" type="application/x-vlc-plugin" width="200" height="500" pluginspage="http://www.videolan.org" allownetworking="internal" allowscriptaccess="always" quality="high" src="rtsp://***********************/Streaming/Channels/1">
  </object>

代码很简单，更播放 flash 差异不是很大，须要改几个点，
1.object 标签的 type , codebase 属性
2.param 标签 <param name='mrl' value='rtsp://***********************/Streaming/Channels/1' />

js code

//获取 VLC js 队形 
     function getVLC(name) {
            if (window.document[name]) {
                return window.document[name];
            }
            if (navigator.appName.indexOf("Microsoft Internet") == -1) {
                if (document.embeds && document.embeds[name])
                    return document.embeds[name];
            } else {
                return document.getElementById(name);
            }
        }
    
     // 根据地址切换视频
        function doGo(mrl) {
            try {
                var vlc = getVLC("vlc"),
                    itemId = vlc.playlist.add(mrl);
                vlc.playlist.playItem(itemId);

            } catch (e) {
                console.log(e);
            }
        }
       //调用
     doGo(mrl)

咱们用js 代码主要是用来切换地址，达到若是流数据 地址变化， 内容跟着变化。

VlC 给咱们提供了丰富的API ,请查看 VLC API

HLS

简介

Http Live Streaming （简称HLS) ，它在移动 Web 浏览器支持挺好，因此如今好多移动端直播都在用此协议。但在 PC Chrome,Firefox 上不支持，因此还须要借助flash 。在研究的过程当中发现了 video.js 这个插件，代码托管 在 github 上，开源。可是它不直接支持播放 HLS 协议的播放. 须要借助 videojs-contrib-hls 可是我怎么测试都没成功，播放不了。你们有测试通的能够联系我。 通过一番的查找，github 上一顿搜索，黄天不负有心人，找见了这个库FZ-live 我看他也是基于 video.js 的。

html code

<video id="video" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'>
    <source src="./src/z.m3u8" type="application/x-mpegURL">
</video>

直接写video 标签， 在 source 的 src 给上路径就能够，还有个要求，就是资源 不能跨域，须要在同一域下。

js code

//切换地址播放
var player = videojs('video');
 player.ready(function() {
     var myPlayer = this;
     myPlayer.src(url);
     myPlayer.load(url);
     myPlayer.play();
   });

咱们用js实现了切换地址播放。 video.js 这个插件 提供了好多api 咱们有须要能够查看,能够作出好多功能

RTMP

简介

Real Time Messaging Protocol（简称 RTMP）是 Macromedia 开发的一套视频直播协议，如今属于 Adobe。因此咱们就只能借助 flash 了 。 在研究 video.js 插件的时候， 看它也能提供 RTMP 的播放，这下咱们就省事多了。

html code

<video id="vlc" class="video-js vjs-default-skin" controls  preload="none" data-setup='{}'></video>

看到我没有写 source 标签，咱们直接用js 来操做，作到播放 RTMP 和 HLS 的适配 .

js code

player.ready(function() {
    var myPlayer = this;
    myPlayer.reset();
    if (scope.type == 'hls') {
        console.log('hls');
        myPlayer.src({ type: "application/x-mpegURL", src: scope.url });
    } else {
        myPlayer.src({ type: "rtmp/flv", src: scope.url });
        console.log('rtmp');
    }
    myPlayer.load(scope.url);
    myPlayer.play();
});

咱们借助 player.src() 方法就是实现，根据不一样的类型设置 src 的type 就能够。可是每次咱们更改地址的时候，记得调用一下 player.reset() 方法会重置播放器 。要不会有问题，切换不了。

结束语

以上我是我在解决前段播放 流媒体数据的过程。其中还有几个问题，须要研究改进。

1. RTSP 在 chrome 的高版本浏览器播放 2.videojs-contrib-hls 这个库播放 hls （猜想，是否是后端给的数据流有问题）