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