external/srs
1
0
Fork 0
mirror of https://github.com/ossrs/srs.git synced 2025-03-09 15:49:59 +00:00
Code Issues Releases Wiki Activity

update the srs player, set the DAR.

Browse source
This commit is contained in:
winlin 2013-12-20 18:46:56 +08:00
parent 5bfb561f89
commit 42ec5f19fc
5 changed files with 258 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

29
trunk/research/players/jwplayer6.html
View file

@ -15,8 +15,14 @@
<script type="text/javascript" src="js/jwplayer.js" ></script>
<script type='text/javascript'>jwplayer.key = 'N8zhkmYvvRwOhz4aTGkySoEri4x+9pQwR7GHIQ=='; </script>
<script type="text/javascript">
function jwplayer_play(url) {
var _player = null;
var _player = null;
var _url = null;
$(function(){
// get the vhost and port to set the default url.
// for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
// url set to: rtmp://demo:1935/live/livestream
srs_init("#txt_rtmp_url", "#txt_hls_url");
$("#main_modal").on("hide", function(){
$("#div_container").remove();
_player.stop();
@ -35,7 +41,7 @@
$("#player").append(obj);
var conf = {
file: url,
file: _url,
width: "530",
height: "300",
autostart: true,
@ -44,23 +50,14 @@
_player = jwplayer('player_id').setup(conf);
});
$("#main_modal").modal({show:true, keyboard:false});
}
$(function(){
// get the vhost and port to set the default url.
// for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
// url set to: rtmp://demo:1935/live/livestream
srs_init("#txt_rtmp_url", "#txt_hls_url");
$("#btn_play_rtmp").click(function(){
var url = $("#txt_rtmp_url").val();
jwplayer_play(url);
_url = $("#txt_rtmp_url").val();
$("#main_modal").modal({show:true, keyboard:false});
});
$("#btn_play_hls").click(function(){
var url = $("#txt_hls_url").val();
jwplayer_play(url);
_url = $("#txt_hls_url").val();
$("#main_modal").modal({show:true, keyboard:false});
});
});
</script>

78
trunk/research/players/osmf.html
View file

@ -14,50 +14,54 @@
}
</style>
<script type="text/javascript">
function osmf_play(url) {
$("#div_container").remove();
var obj = $("<div/>");
$(obj).attr("id", "div_container");
var player = $("<div/>");
$(obj).append(player);
$(obj).attr("id", "player_id");
$("#player").append(obj);
var flashvars = {};
flashvars.src = url;
flashvars.streamType = "live"; // live or recorded
flashvars.autoPlay = true;
flashvars.controlBarAutoHide = false;
flashvars.scaleMode = "stretch";
flashvars.bufferTime = 0.8;
var params = {};
params.allowFullScreen = true;
var attributes = {};
swfobject.embedSWF(
"js/StrobeMediaPlayback.swf", "player_id",
530, 300,
"11.1", "js/AdobeFlashPlayerInstall.swf",
flashvars, params, attributes
);
}
$(function(){
// get the vhost and port to set the default url.
// for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
// url set to: rtmp://demo:1935/live/livestream
srs_init($("#txt_url"));
$("#main_modal").on("hide", function(){
osmf_play("http://localhost");
$("#div_container").remove();
});
$("#main_modal").on("show", function(){
var url = $("#txt_url").val();
osmf_play(url);
});
$("#btn_play").click(function(){
$("#main_modal").on("hide", function(){
$("#div_container").remove();
});
$("#main_modal").on("show", function(){
$("#div_container").remove();
var obj = $("<div/>");
$(obj).attr("id", "div_container");
var player = $("<div/>");
$(obj).append(player);
$(obj).attr("id", "player_id");
$("#player").append(obj);
var url = $("#txt_url").val();
var flashvars = {};
flashvars.src = url;
flashvars.streamType = "live"; // live or recorded
flashvars.autoPlay = true;
flashvars.controlBarAutoHide = false;
flashvars.scaleMode = "stretch";
flashvars.bufferTime = 0.8;
var params = {};
params.allowFullScreen = true;
var attributes = {};
swfobject.embedSWF(
"js/StrobeMediaPlayback.swf", "player_id",
530, 300,
"11.1", "js/AdobeFlashPlayerInstall.swf",
flashvars, params, attributes
);
});
$("#main_modal").modal({show:true, keyboard:false});
});
});

122
trunk/research/players/srs_player.html
View file

@ -14,26 +14,14 @@
}
</style>
<script type="text/javascript">
var srs_player = null;
$(function(){
// get the vhost and port to set the default url.
// for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
// url set to: rtmp://demo:1935/live/livestream
srs_init($("#txt_url"));
$("#btn_play").click(on_btn_play);
$("#btn_pause").click(function(){
if ($("#btn_pause").text() == "暂停") {
$("#btn_pause").text("继续");
srs_player.pause();
} else {
$("#btn_pause").text("暂停");
srs_player.resume();
}
});
});
function on_btn_play(){
var srs_player = null;
$("#main_modal").on("show", function(){
$("#div_container").remove();
@ -50,9 +38,12 @@
srs_player = new SrsPlayer("player_id", url, 530, 300, 0.8);
srs_player.on_player_ready = function() {
// hack the callback function, do something then play.
return srs_player.play();
}
srs_player.on_player_metadata = function(metadata) {
$("#btn_dar_original").text("视频原始比例" + "(" + metadata.width + ":" + metadata.height + ")");
return 0;
}
srs_player.start();
});
@ -60,10 +51,37 @@
srs_player.stop();
});
$("#main_modal").modal({show:true, keyboard:false});
}
$("#btn_play").click(function(){
$("#main_modal").modal({show:true, keyboard:false});
});
$("#btn_pause").click(function(){
if ($("#btn_pause").text() == "暂停") {
$("#btn_pause").text("继续");
srs_player.pause();
} else {
$("#btn_pause").text("暂停");
srs_player.resume();
}
});
$("#btn_dar_original").click(function(){
srs_player.dar(0, 0);
});
$("#btn_dar_21_9").click(function(){
srs_player.dar(9, 21);
});
$("#btn_dar_16_9").click(function(){
srs_player.dar(9, 16);
});
$("#btn_dar_4_3").click(function(){
srs_player.dar(3, 4);
});
});
// the SrsPlayer object.
/*
* the SrsPlayer object.
*/
function SrsPlayer(container, stream_url, width, height, buffer_time) {
if (!SrsPlayer.__id) {
SrsPlayer.__id = 100;
@ -81,18 +99,27 @@
this.buffer_time = buffer_time;
this.id = SrsPlayer.__id++;
this.callbackObj = null;
// callback set the following values.
this.meatadata = {}; // for on_player_metadata
}
// user can set some callback, then start the player.
// callbacks:
// on_player_ready():int, when srs player ready, user can play.
/*
* user can set some callback, then start the player.
* callbacks:
* on_player_ready():int, when srs player ready, user can play.
* on_player_metadata(metadata:Object):int, when srs player get metadata.
*/
SrsPlayer.prototype.start = function() {
// embed the flash.
var flashvars = {};
flashvars.id = this.id;
flashvars.on_player_ready = "__srs_on_player_ready";
flashvars.on_player_metadata = "__srs_on_player_metadata";
var params = {};
params.wmode = "opaque";
params.allowFullScreen = true;
params.allowScriptAccess = "always";
var attributes = {};
@ -114,6 +141,16 @@
return this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time);
}
SrsPlayer.prototype.stop = function() {
for (var i = 0; i < SrsPlayer.__players.length; i++) {
var player = SrsPlayer.__players[i];
if (player.id != this.id) {
continue;
}
SrsPlayer.__players.splice(i, 1);
break;
}
return this.callbackObj.ref.__stop();
}
SrsPlayer.prototype.pause = function() {
@ -122,9 +159,26 @@
SrsPlayer.prototype.resume = function() {
return this.callbackObj.ref.__resume();
}
/*
* to set the DAR, for example, DAR=16:9
* @param num, for example, 9. use metadata height if 0.
* @param den, for example, 16. use metadata width if 0.
*/
SrsPlayer.prototype.dar = function(num, den) {
if (num == 0 && this.metadata) {
num = this.metadata.height;
}
if (den == 0 && this.metadata) {
den = this.metadata.width;
}
return this.callbackObj.ref.__dar(num, den);
}
SrsPlayer.prototype.on_player_ready = function() {
return this.play();
}
SrsPlayer.prototype.on_player_metadata = function(metadata) {
return 0;
}
function __srs_on_player_ready(id) {
for (var i = 0; i < SrsPlayer.__players.length; i++) {
var player = SrsPlayer.__players[i];
@ -136,6 +190,23 @@
return player.on_player_ready();
}
throw new Error("player not found. id=" + id);
}
function __srs_on_player_metadata(id, metadata) {
for (var i = 0; i < SrsPlayer.__players.length; i++) {
var player = SrsPlayer.__players[i];
if (player.id != id) {
continue;
}
// user may override the on_player_metadata,
// so set the data before invoke it.
player.metadata = metadata;
return player.on_player_metadata(metadata);
}
throw new Error("player not found. id=" + id);
}
</script>
@ -176,6 +247,15 @@
<div class="modal-body" id="player">
</div>
<div class="modal-footer">
<div class="btn-group dropup">
<button class="btn dropdown-toggle" data-toggle="dropdown">宽高比 <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="btn_dar_original" href="#">视频原始比例</a></li>
<li><a id="btn_dar_21_9" href="#">宽屏影院(21:9)</a></li>
<li><a id="btn_dar_16_9" href="#">宽屏电影(16:9)</a></li>
<li><a id="btn_dar_4_3" href="#">窄屏(4:3)</a></li>
</ul>
</div>
<button id="btn_pause" class="btn">暂停</button>
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button>
</div>

BIN
trunk/research/players/srs_player/release/srs_player.swf
View file

Binary file not shown.

114
trunk/research/players/srs_player/src/srs_player.as
View file

@ -15,14 +15,23 @@ package
public class srs_player extends Sprite
{
// user set id.
private var id:String = null;
// user set callback
private var on_player_ready:String = null;
private var on_player_metadata:String = null;
// play param url.
private var url:String = null;
// play param, user set width
private var w:int = 0;
// play param, user set height.
private var h:int = 0;
private var conn:NetConnection = null;
private var stream:NetStream = null;
private var video:Video = null;
private var metadata:Object = {};
public function srs_player()
{
@ -51,6 +60,7 @@ package
this.id = flashvars.id;
this.on_player_ready = flashvars.on_player_ready;
this.on_player_metadata = flashvars.on_player_metadata;
flash.utils.setTimeout(this.onJsReady, 0);
}
@ -66,6 +76,7 @@ package
flash.external.ExternalInterface.addCallback("__stop", this.js_call_stop);
flash.external.ExternalInterface.addCallback("__pause", this.js_call_pause);
flash.external.ExternalInterface.addCallback("__resume", this.js_call_resume);
flash.external.ExternalInterface.addCallback("__dar", this.js_call_dar);
var code:int = flash.external.ExternalInterface.call(this.on_player_ready, this.id);
if (code != 0) {
@ -87,6 +98,37 @@ package
return 0;
}
/**
* to set the DAR, for example, DAR=16:9
* @param num, for example, 9.
* @param den, for example, 16.
*/
public function js_call_dar(num:int, den:int):int {
if (this.video && num > 0 && den > 0 && this.video.width > 0) {
// set DAR.
if (num < den) {
// calc the height by DAR
var _height:int = this.video.width * num / den;
// height overflow, calc the width by DAR
if (_height > this.h) {
var _width:int = this.video.height * den / num;
this.video.width = _width;
this.video.height = this.h;
} else {
this.video.width = this.w;
this.video.height = _height;
}
}
// align center.
this.video.y = (this.h - this.video.height) / 2;
this.video.x = (this.w - this.video.width) / 2;
}
return 0;
}
public function js_call_stop():int {
if (this.stream) {
this.stream.close();
@ -106,7 +148,14 @@ package
public function js_call_play(url:String, _width:int, _height:int, _buffer_time:Number):int {
this.url = url;
trace("start to play url: " + this.url);
this.w = _width;
this.h = _height;
trace("start to play url: " + this.url + ", w=" + this.w + ", h=" + this.h);
// draw black bg.
this.graphics.beginFill(0x00, 1.0);
this.graphics.drawRect(0, 0, this.w, this.h);
this.graphics.endFill();
js_call_stop();
@ -122,18 +171,13 @@ package
stream = new NetStream(conn);
stream.bufferTime = _buffer_time;
stream.client = {};
stream.client.onMetaData = function(metadata:Object):void {
var customItems:Array = [new ContextMenuItem("SrsPlayer")];
if (metadata.hasOwnProperty("server")) {
customItems.push(new ContextMenuItem("Server: " + metadata.server));
}
if (metadata.hasOwnProperty("contributor")) {
customItems.push(new ContextMenuItem("Contributor: " + metadata.contributor));
}
contextMenu.customItems = customItems;
};
stream.client.onMetaData = on_metadata;
stream.addEventListener(NetStatusEvent.NET_STATUS, function(evt:NetStatusEvent):void {
trace ("NetStream: code=" + evt.info.code);
if (evt.info.code == "NetStream.Video.DimensionChange") {
on_metadata(metadata);
}
});
stream.play(url.substr(url.lastIndexOf("/")));
@ -148,5 +192,53 @@ package
return 0;
}
private function on_metadata(metadata:Object):void {
this.metadata = metadata;
// for context menu
var customItems:Array = [new ContextMenuItem("SrsPlayer")];
if (metadata.hasOwnProperty("server")) {
customItems.push(new ContextMenuItem("Server: " + metadata.server));
}
if (metadata.hasOwnProperty("contributor")) {
customItems.push(new ContextMenuItem("Contributor: " + metadata.contributor));
}
contextMenu.customItems = customItems;
// for js.
var obj:Object = {
width: video.width,
height: video.height,
server: 'srs',
contributor: 'winlin'
};
if (metadata.hasOwnProperty("width")) {
obj.width = metadata.width;
}
if (metadata.hasOwnProperty("height")) {
obj.height = metadata.height;
}
if (video.videoWidth > 0) {
obj.width = video.videoWidth;
}
if (video.videoHeight > 0) {
obj.height = video.videoHeight;
}
if (metadata.hasOwnProperty("server")) {
obj.server = metadata.server;
}
if (metadata.hasOwnProperty("contributor")) {
obj.contributor = metadata.contributor;
}
var code:int = flash.external.ExternalInterface.call(on_player_metadata, id, obj);
if (code != 0) {
throw new Error("callback on_player_metadata failed. code=" + code);
}
}
}
}