mirror of https://github.com/ossrs/srs.git
add rtmp players
winlin
11 years ago
parent
ff565c4d9b
commit
8745ab542b
@ -0,0 +1,12 @@
|
|||||||
|
<head>
|
||||||
|
<title>Players</title>
|
||||||
|
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
welcome!</p>
|
||||||
|
<hr/>
|
||||||
|
<p><a href="rtmp">Rtmp流播放器</a></p>
|
||||||
|
<p><a href="osmf">OSMF播放器</a></p>
|
||||||
|
<p><a href="jwplayer5">JWPlayer5</a></p>
|
||||||
|
<p><a href="jwplayer6">JWPlayer6</a></p>
|
||||||
|
</body>
|
||||||
@ -0,0 +1,50 @@
|
|||||||
|
<head>
|
||||||
|
<title>JWPlayer5</title>
|
||||||
|
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
|
||||||
|
<style>
|
||||||
|
body{margin:0; padding:0; color:#EEEEEE;}
|
||||||
|
input.url{width:400px; height:20px;}
|
||||||
|
input.size{width:40px; height:20px;}
|
||||||
|
input.buffer{width:20px; height:20px;}
|
||||||
|
input.play{width:60px; height: 25px;}
|
||||||
|
select.type{width:50px; }
|
||||||
|
span.size{padding-left:10px; padding-right:10px;}
|
||||||
|
div.main{font-size:12px; padding:5px 10px 0px 5px; background-color:#333333; width: 780px;}
|
||||||
|
div.player{padding-top:3px; padding-bottom:10px;}
|
||||||
|
div.control{padding-bottom:10px; background-color:#333333; margin-top:5px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<div class="main">
|
||||||
|
<div id="player"></div>
|
||||||
|
<div class="control" id="control">
|
||||||
|
Url(RTMP/HTTP): <input id="url" type="text" class="url" value="rtmp://dev:1935/live/livestream"></input>
|
||||||
|
<input type="button" class="play" value="Play" onclick="play()"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="jwplayer.js" ></script>
|
||||||
|
<script>jwplayer.key="L1P3Ig76mGOK94gZ9WAAGD+Fb1VCVhoZ/Dm0fg=="</script>
|
||||||
|
<script type='text/javascript'>
|
||||||
|
function play(){
|
||||||
|
var player = document.getElementById("player");
|
||||||
|
player.innerHTML = "";
|
||||||
|
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.id = "player_div";
|
||||||
|
player.appendChild(div);
|
||||||
|
|
||||||
|
var url = document.getElementById("url").value;
|
||||||
|
var provider = (url.indexOf("rtmp://") == 0) ? "rtmp":"http";
|
||||||
|
var conf = {
|
||||||
|
file: url.substr(url.lastIndexOf("/") + 1),
|
||||||
|
streamer: url.substr(0, url.lastIndexOf("/")),
|
||||||
|
provider: 'rtmp',
|
||||||
|
width: "720",
|
||||||
|
height: "576",
|
||||||
|
autostart: true,
|
||||||
|
};
|
||||||
|
//console.log(conf);
|
||||||
|
jwplayer('player_div').setup(conf);
|
||||||
|
}
|
||||||
|
play();
|
||||||
|
</script>
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,47 @@
|
|||||||
|
<head>
|
||||||
|
<title>JWPlayer6</title>
|
||||||
|
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
|
||||||
|
<style>
|
||||||
|
body{margin:0; padding:0; color:#EEEEEE;}
|
||||||
|
input.url{width:400px; height:20px;}
|
||||||
|
input.size{width:40px; height:20px;}
|
||||||
|
input.buffer{width:20px; height:20px;}
|
||||||
|
input.play{width:60px; height: 25px;}
|
||||||
|
select.type{width:50px; }
|
||||||
|
span.size{padding-left:10px; padding-right:10px;}
|
||||||
|
div.main{font-size:12px; padding:5px 10px 0px 5px; background-color:#333333; width: 780px;}
|
||||||
|
div.player{padding-top:3px; padding-bottom:10px;}
|
||||||
|
div.control{padding-bottom:10px; background-color:#333333; margin-top:5px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<div class="main">
|
||||||
|
<div id="player"></div>
|
||||||
|
<div class="control" id="control">
|
||||||
|
Url(RTMP/HTTP): <input id="url" type="text" class="url" value="rtmp://dev:1935/live/livestream"></input>
|
||||||
|
<input type="button" class="play" value="Play" onclick="play()"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript" src="jwplayer.js" ></script>
|
||||||
|
<script>jwplayer.key="L1P3Ig76mGOK94gZ9WAAGD+Fb1VCVhoZ/Dm0fg=="</script>
|
||||||
|
<script type='text/javascript'>
|
||||||
|
function play(){
|
||||||
|
var player = document.getElementById("player");
|
||||||
|
player.innerHTML = "";
|
||||||
|
|
||||||
|
var div = document.createElement("div");
|
||||||
|
div.id = "player_div";
|
||||||
|
player.appendChild(div);
|
||||||
|
|
||||||
|
var url = document.getElementById("url").value;
|
||||||
|
var conf = {
|
||||||
|
file: url,
|
||||||
|
width: "720",
|
||||||
|
height: "576",
|
||||||
|
autostart: true,
|
||||||
|
};
|
||||||
|
//console.log(conf);
|
||||||
|
jwplayer('player_div').setup(conf);
|
||||||
|
}
|
||||||
|
play();
|
||||||
|
</script>
|
||||||
|
|
||||||
Binary file not shown.
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@ -0,0 +1,87 @@
|
|||||||
|
<head>
|
||||||
|
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
|
||||||
|
<title>OSMFPlayer</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body{margin:0; padding:0; color:#EEEEEE;}
|
||||||
|
input.url{width:300px; height:20px;}
|
||||||
|
input.size{width:40px; height:20px;}
|
||||||
|
input.buffer{width:20px; height:20px;}
|
||||||
|
input.play{width:60px; height: 25px;}
|
||||||
|
select.type{width:50px; }
|
||||||
|
span.size{padding-left:10px; padding-right:10px;}
|
||||||
|
div.main{font-size:12px; padding:5px 10px 0px 5px; background-color:#333333;}
|
||||||
|
div.player{padding-top:3px; padding-bottom:10px;}
|
||||||
|
div.control{padding-bottom:10px; background-color:#333333; }
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<div class="main" id="main">
|
||||||
|
<div id="player" class="player"></div>
|
||||||
|
<div class="control" id="control">
|
||||||
|
Url(RTMP/HTTP): <input id="url" type="text" class="url" value="rtmp://dev:1935/live/livestream"></input>
|
||||||
|
<select class="type" id="type">
|
||||||
|
<option value="live" selected>live</option>
|
||||||
|
<option value="recorded">vod</option>
|
||||||
|
</select>
|
||||||
|
<span class="size">
|
||||||
|
Width: <input id="width" type="text" class="size" value="720"></input>
|
||||||
|
Height: <input id="height" type="text" class="size" value="576"></input>
|
||||||
|
Buffer: <input id="buffer" type="text" class="buffer" value="2"></input>(s)
|
||||||
|
</span>
|
||||||
|
<input type="button" class="play" value="Play" onclick="play()"></input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="swfobject.js"></script>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
player = document.getElementById("player");
|
||||||
|
player_div = null;
|
||||||
|
|
||||||
|
function play(){
|
||||||
|
// remove old player
|
||||||
|
if(player_div != null){
|
||||||
|
player.innerHTML = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
// create new div
|
||||||
|
player_div = document.createElement("div");
|
||||||
|
player.appendChild(player_div);
|
||||||
|
|
||||||
|
// set id to swfobject to create player.
|
||||||
|
player_div.id = "player_div";
|
||||||
|
|
||||||
|
// generate player.
|
||||||
|
var width = document.getElementById("width").value;
|
||||||
|
var height = document.getElementById("height").value;
|
||||||
|
|
||||||
|
// set new style
|
||||||
|
var main = document.getElementById("main");
|
||||||
|
var min_width = 830;
|
||||||
|
main.style.width = Math.max(min_width, width);
|
||||||
|
|
||||||
|
var flashvars = {};
|
||||||
|
flashvars.src = document.getElementById("url").value;
|
||||||
|
flashvars.streamType = document.getElementById("type").value; // live or recorded
|
||||||
|
flashvars.autoPlay = true;
|
||||||
|
flashvars.controlBarAutoHide = false;
|
||||||
|
flashvars.scaleMode = "stretch";
|
||||||
|
flashvars.bufferTime = document.getElementById("buffer").value;
|
||||||
|
|
||||||
|
var params = {};
|
||||||
|
params.allowFullScreen = true;
|
||||||
|
|
||||||
|
var attributes = {};
|
||||||
|
|
||||||
|
swfobject.embedSWF(
|
||||||
|
"StrobeMediaPlayback.swf", "player_div",
|
||||||
|
width, height,
|
||||||
|
"11.1", "AdobeFlashPlayerInstall.swf",
|
||||||
|
flashvars, params, attributes
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// play the default stream.
|
||||||
|
play();
|
||||||
|
</script>
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
Binary file not shown.
@ -0,0 +1,33 @@
|
|||||||
|
<head>
|
||||||
|
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
|
||||||
|
<title>RtmpPlayer</title>
|
||||||
|
<style>
|
||||||
|
body{margin:0; padding:0; color:#EEEEEE;}
|
||||||
|
input.url{width:400px; height:20px;}
|
||||||
|
input.size{width:40px; height:20px;}
|
||||||
|
input.buffer{width:20px; height:20px;}
|
||||||
|
input.play{width:60px; height: 25px;}
|
||||||
|
select.type{width:50px; }
|
||||||
|
span.size{padding-left:10px; padding-right:10px;}
|
||||||
|
div.main{font-size:12px; padding:5px 10px 0px 5px; background-color:#333333; width: 980px;}
|
||||||
|
div.player{padding-top:3px; padding-bottom:10px;}
|
||||||
|
div.control{padding-bottom:10px; background-color:#333333; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<script type="text/javascript" src="rtmp.player.js"></script>
|
||||||
|
<div>
|
||||||
|
<div id="player"></div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var o = new RtmpPlayer("player", "RtmpPlayer.swf", 1350, 1050);
|
||||||
|
|
||||||
|
o.setRtmpUrl("rtmp://dev:1935/live/livestream");
|
||||||
|
o.admin = "admin";
|
||||||
|
o.password = "123456";
|
||||||
|
o.loop = false;
|
||||||
|
o.cansave = true;
|
||||||
|
o.islive = true;
|
||||||
|
o.autostart = true;
|
||||||
|
|
||||||
|
o.run();
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue