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

時間 2019-11-18

標籤前段播放媒體 rtmp rtsp hls 简体版

原文原文鏈接

前言

最近項目須要流媒體的播放，後端一共提供了三種流數據(RTSP,RTMP,HLS),在不一樣的場景可能會使用到不一樣方式播放，就須要作到適配，支持全部的流數據播放。花了一段時間研究，在這裏和你們分享一下，還有些遺留問題，看你們有沒有好的方法。html

RTSP

簡介

這種協議流數據前段播放，沒有特別好的解決方法，須要在本機裝一個vlc 插件，依靠這個插件才能讓 RTSP 協議在網頁上能播放，可是目前高版本的 Chrome 瀏覽器不支持 NPAPI 插件，也就是說高版本的 Chrome 瀏覽器仍是不能播放（46 以上的版本都不行）。git

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' />github

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 代碼主要是用來切換地址，達到若是流數據地址變化，內容跟着變化。web

VlC 給咱們提供了豐富的API ,請查看 VLC APIchrome

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 給上路徑就能夠，還有個要求，就是資源不能跨域，須要在同一域下。api

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 的適配 .app

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() 方法會重置播放器。要不會有問題，切換不了。