Front-end playback streaming media (RTMP,RTSP,HLS)

Preface

Recent projects require streaming media playback, the backend provides three kinds of streaming data (Rtsp,rtmp,hls), in different scenarios may be used in different ways to play, you need to adapt to support all streaming data playback. Spent a period of time studying, here and share with you, there are some lingering problems to see if we have a good way. RTSP Brief Introduction

This protocol stream data in front of the play, there is no particularly good solution, the need to install a VLC plug-in, rely on this plug-in to allow the RTSP protocol on the Web page can play, but the current version of the Chrome browser does not support Npapi plug-ins, that is, the high version of the Chrome The browser still can't play (46 or more versions are not available). HTML code

 <object type= ' application/x-vlc-plugin ' id= ' VLC ' width= ' height= ' "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= '/> <param ' true ' name=
     ; <param name= ' Loop ' value= ' false '/> <param value= "Transparent" name= "wmode" > <embed id= ' VLC ' wmod e= "Transparent" type= "Application/x-vlc-plugin" width= "" height= "" pluginspage= "http://www.videolan.org" allownetworking= "Internal" allowscriptaccess= "always" quality= "High" src= "rtsp://***********************/" STREAMING/CHANNELS/1 "> </object> 

Code is very simple, more play flash difference is not very big, need to change a few points,
1.object label  type , codebase  Properties
2.param label  < param name= ' MRL ' value= ' rtsp://***********************/streaming/channels/1 '/> js code

     Gets VLC js formation 
     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);
            }
        }
    
     Toggle Video
        function Dogo (MRL) {
            try {
                var vlc = GETVLC ("VLC"),
                    itemId = Vlc.playlist.add (MRL)
                , according to address Vlc.playlist.playItem (itemId);

            } catch (e) {
                console.log (e);
            }
        }
       Call
     Dogo (MRL)

We use the JS code is mainly used to switch addresses, to achieve if the flow of data address changes, the content followed by changes.

VlC provides us with a rich API, please check the VlC API HLS Introduction

Http Live Streaming (HLS), which is very well supported in mobile Web browsers, is now using this protocol for many mobile-side live broadcasts. However, it is not supported on PC Chrome,firefox, so you need to use Flash. In the study of the process found video.js this plug-in, code hosted on the GitHub, open source. However, it does not directly support playback of the HLS protocol. Need to use Videojs-contrib-hls but I did not succeed in how to test, can not play. Everyone has the test pass can contact me. After some of the search, GitHub on a visit, Huang Tian, find this library fz-live I think he is also based on 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>

Directly write the video tag, in the source of SRC to the path can be, there is a requirement that resources can not cross the domain, need to be under the same domain. JS Code

Toggle Address Play
var player = videojs (' video ');
 Player.ready (function () {
     var myplayer = this;
     MYPLAYER.SRC (URL);
     Myplayer.load (URL);
     Myplayer.play ();
   });

We use JS to achieve the switch address playback. Video.js This plugin provides a lot of APIs we need to be able to view, can make a good multi-functional RTMP profile

Real time Messaging Protocol (RTMP) is a video-broadcast protocol developed by Macromedia and now belongs to Adobe. So we can only use flash. In the study of the Video.js plug-in, see it can also provide RTMP playback, this we will be more convenient. HTML code

<video id= "VLC" class= "Video-js Vjs-default-skin" Controls preload=  "None" Data-setup= ' {} ' ></video>

See I did not write the source label, we directly use JS to operate, to play RTMP and HLS adaptation. 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 ();
});

We use the PLAYER.SRC () method is to implement, according to different types of SRC type can be set. But every time we change the address, remember to call the Player.reset () method to reset the player. If you don't have a problem, you can't switch. Concluding remarks

Above I am the process that I am addressing the streaming media data in the previous section. There are a few more problems that need to be studied and improved. RTSP in Chrome's high version browser play Videojs-contrib-hls this library play HLS (guessing, is not the backend to the data stream has problems)

Http://www.cnblogs.com/qiaojie/p/5733335.html