github-forks
/
srs
mirror of https://github.com/ossrs/srs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refine srs player, support set the bufferTimeMax.

Browse Source
pull/556/head
winlin 10 years ago
parent 74d4c96423
commit b25c45c643
5 changed files with 184 additions and 58 deletions
Show Stats Download Patch File Download Diff File

2
trunk/research/players/js/srs.page.js
Unescape Escape View File

@ -3,7 +3,7 @@
//////////////////////////////////////////////////////////////////////////////////
// to query the swf anti cache.
function srs_get_version_code() { return "1.25"; }
function srs_get_version_code() { return "1.26"; }
/**
* player specified size.

64
trunk/research/players/js/srs.player.js
Unescape Escape View File

@ -23,6 +23,7 @@ function SrsPlayer(container, width, height, private_object) {
this.id = SrsPlayer.__id++;
this.stream_url = null;
this.buffer_time = 0.3; // default to 0.3
this.max_buffer_time = this.buffer_time * 3; // default to 3 x bufferTime.
this.volume = 1.0; // default to 100%
this.callbackObj = null;
@ -118,8 +119,11 @@ SrsPlayer.prototype.play = function(url, volume) {
this.volume = volume;
}
this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time, this.volume);
this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time, this.max_buffer_time, this.volume);
}
/**
* stop play stream.
*/
SrsPlayer.prototype.stop = function() {
for (var i = 0; i < SrsPlayer.__players.length; i++) {
var player = SrsPlayer.__players[i];
@ -134,9 +138,15 @@ SrsPlayer.prototype.stop = function() {
this.callbackObj.ref.__stop();
}
/**
* pause the play.
*/
SrsPlayer.prototype.pause = function() {
this.callbackObj.ref.__pause();
}
/**
* resume the play.
*/
SrsPlayer.prototype.resume = function() {
this.callbackObj.ref.__resume();
}
@ -180,23 +190,75 @@ SrsPlayer.prototype.set_fs = function(refer, percent) {
* @buffer_time the buffer time in seconds.
*/
SrsPlayer.prototype.set_bt = function(buffer_time) {
if (this.buffer_time == buffer_time) {
return;
}
this.buffer_time = buffer_time;
this.callbackObj.ref.__set_bt(buffer_time);
// reset the max buffer time to 3 x buffer_time.
this.set_mbt(buffer_time * 3);
}
/**
* set the stream max buffer time in seconds.
* @param max_buffer_time the max buffer time in seconds.
* @remark this is the key feature for realtime communication by flash.
*/
SrsPlayer.prototype.set_mbt = function(max_buffer_time) {
// we must atleast set the max buffer time to 0.6s.
max_buffer_time = Math.max(0.6, max_buffer_time);
// max buffer time always greater than buffer time.
max_buffer_time = Math.max(this.buffer_time, max_buffer_time);
if (parseInt(this.max_buffer_time * 10) == parseInt(max_buffer_time * 10)) {
return;
}
this.max_buffer_time = max_buffer_time;
this.callbackObj.ref.__set_mbt(max_buffer_time);
}
/**
* the callback when player is ready.
*/
SrsPlayer.prototype.on_player_ready = function() {
}
/**
* the callback when player got metadata.
* @param metadata the metadata which player got.
*/
SrsPlayer.prototype.on_player_metadata = function(metadata) {
// ignore.
}
/**
* the callback when player timer event.
* @param time current stream time.
* @param buffer_length current buffer length.
* @param kbps current video plus audio bitrate in kbps.
* @param fps current video fps.
* @param rtime current relative time by flash.util.getTimer().
*/
SrsPlayer.prototype.on_player_timer = function(time, buffer_length, kbps, fps, rtime) {
// ignore.
}
/**
* the callback when player got NetStream.Buffer.Empty
* @param time current relative time by flash.util.getTimer().
*/
SrsPlayer.prototype.on_player_empty = function(time) {
// ignore.
}
/**
* the callback when player got NetStream.Buffer.Full
* @param time current relative time by flash.util.getTimer().
*/
SrsPlayer.prototype.on_player_full = function(time) {
// ignore.
}
/**
* helpers.
*/
function __srs_find_player(id) {
for (var i = 0; i < SrsPlayer.__players.length; i++) {
var player = SrsPlayer.__players[i];

146
trunk/research/players/srs_player.html
Unescape Escape View File

@ -284,7 +284,7 @@
<div>
<div class="btn-group dropup">
<button class="btn dropdown-toggle" data-toggle="dropdown">
设置全屏比例大小<span class="caret"></span>
全屏比例大小<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a id="btn_fs_size_screen_100" href="#">屏幕大小(100%)</a></li>
@ -296,7 +296,7 @@
</ul>
</div>
<div class="btn-group dropup">
<button class="btn dropdown-toggle" data-toggle="dropdown">设置显示比例<span class="caret"></span></button>
<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>
@ -306,23 +306,38 @@
</ul>
</div>
<div class="btn-group dropup">
<button class="btn dropdown-toggle" data-toggle="dropdown">设置缓冲区大小<span class="caret"></span></button>
<button class="btn dropdown-toggle" data-toggle="dropdown">缓冲区大小<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="btn_bt_0_1" href="#">0.1秒(实时)</a></li>
<li><a id="btn_bt_0_2" href="#">0.2秒(实时)</a></li>
<li><a id="btn_bt_0_3" href="#">0.3秒(实时)</a></li>
<li><a id="btn_bt_0_5" href="#">0.5秒(实时)</a></li>
<li><a id="btn_bt_0_8" href="#">0.8秒(会议)</a></li>
<li><a id="btn_bt_1" href="#">1秒(低延迟)</a></li>
<li><a id="btn_bt_2" href="#">2秒(较低延时)</a></li>
<li><a id="btn_bt_3" href="#">3秒(流畅播放)</a></li>
<li><a id="btn_bt_5" href="#">5秒(网速较低)</a></li>
<li><a id="btn_bt_10" href="#">10秒(无所谓延迟)</a></li>
<li><a id="btn_bt_30" href="#">30秒(流畅第一)</a></li>
<li><a id="btn_bt_1_0" href="#">1秒(低延迟)</a></li>
<li><a id="btn_bt_2_0" href="#">2秒(较低延时)</a></li>
<li><a id="btn_bt_3_0" href="#">3秒(流畅播放)</a></li>
<li><a id="btn_bt_5_0" href="#">5秒(网速较低)</a></li>
<li><a id="btn_bt_10_0" href="#">10秒(无所谓延迟)</a></li>
<li><a id="btn_bt_30_0" href="#">30秒(流畅第一)</a></li>
</ul>
</div>
<div class="btn-group dropup">
<a id="btn_fullscreen" class="btn">进入全屏</a>
<button class="btn dropdown-toggle" data-toggle="dropdown">最大缓冲区<span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a id="btn_mbt_0_6" href="#">0.6秒(实时)</a></li>
<li><a id="btn_mbt_0_9" href="#">0.9秒(实时)</a></li>
<li><a id="btn_mbt_1_5" href="#">1.5秒(实时)</a></li>
<li><a id="btn_mbt_2_4" href="#">2.4秒(会议)</a></li>
<li><a id="btn_mbt_3_0" href="#">3秒(低延迟)</a></li>
<li><a id="btn_mbt_6_0" href="#">6秒(较低延时)</a></li>
<li><a id="btn_mbt_9_0" href="#">9秒(流畅播放)</a></li>
<li><a id="btn_mbt_15_0" href="#">15秒(网速较低)</a></li>
<li><a id="btn_mbt_30_0" href="#">30秒(无所谓延迟)</a></li>
<li><a id="btn_mbt_90_0" href="#">90秒(流畅第一)</a></li>
</ul>
</div>
<div class="btn-group dropup">
<a id="btn_fullscreen" class="btn">全屏</a>
</div>
<div class="btn-group dropup">
<button id="btn_pause" class="btn">暂停播放</button>
@ -337,21 +352,25 @@
由于安全原因，Flash全屏无法使用JS触发
</div>
<div>
<div class="input-prepend div_play_time" title="BufferLength/BufferTime/MaxBufferTime">
<span class="add-on">@B</span>
<input class="span2" style="width:80px" id="txt_buffer" type="text" placeholder="0/0/0s">
</div>
<div class="input-prepend div_play_time" title="视频的播放流畅度">
<span class="add-on">@F</span>
<input class="span2" style="width:57px" id="txt_fluency" type="text" placeholder="100%">
</div>
<div class="input-prepend div_play_time" title="视频总共卡顿次数">
<span class="add-on">@E</span>
<input class="span2" style="width:85px" id="txt_empty_count" type="text" placeholder="0">
<input class="span2" style="width:45px" id="txt_empty_count" type="text" placeholder="0">
</div>
<div class="input-prepend div_play_time" title="视频当前的帧率FPS">
<span class="add-on">@F</span>
<input class="span2" style="width:85px" id="txt_fps" type="text" placeholder="fps">
<input class="span2" style="width:55px" id="txt_fps" type="text" placeholder="fps">
</div>
<div class="input-prepend div_play_time" title="视频当前的码率(视频+音频)，单位：Kbps">
<span class="add-on">@B</span>
<input class="span2" style="width:85px" id="txt_bitrate" type="text" placeholder="kbps">
<input class="span2" style="width:55px" id="txt_bitrate" type="text" placeholder="kbps">
</div>
<div class="input-prepend div_play_time" title="播放时长，格式：天 时:分:秒">
<span class="add-on">@T</span>
@ -410,6 +429,17 @@
__active_size.addClass("active");
}
function select_buffer(buffer_time) {
var bt = buffer_time;
var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
select_buffer_time(bt_id, bt);
}
function select_max_buffer(max_buffer_time) {
var mbt = max_buffer_time;
var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
select_max_buffer_time(mbt_id, mbt);
}
var __active_bt = null;
function select_buffer_time(bt_id, buffer_time) {
srs_player.set_bt(buffer_time);
@ -420,6 +450,20 @@
__active_bt = $(bt_id).parent();
__active_bt.addClass("active");
select_max_buffer(srs_player.max_buffer_time);
}
var __active_mbt = null;
function select_max_buffer_time(mbt_id, max_buffer_time) {
srs_player.set_mbt(max_buffer_time);
if (__active_mbt) {
__active_mbt.removeClass("active");
}
__active_mbt = $(mbt_id).parent();
__active_mbt.addClass("active");
}
$(function(){
@ -447,7 +491,7 @@
srs_player = new SrsPlayer("player_id", srs_get_player_width(), srs_get_player_height());
srs_player.on_player_ready = function() {
select_buffer_time("#btn_bt_0_1", 0.1);
select_buffer(0.2);
this.play(url);
};
srs_player.on_player_metadata = function(metadata) {
@ -456,16 +500,21 @@
select_fs_size("#btn_fs_size_screen_100", "screen", 100);
};
srs_player.on_player_timer = function(time, buffer_length, kbps, fps, rtime) {
var buffer = buffer_length / this.buffer_time * 100;
var buffer = buffer_length / this.max_buffer_time * 100;
$("#pb_buffer").width(Number(buffer).toFixed(1) + "%");
$("#pb_buffer_bg").attr("title",
"缓冲区长度:" + Number(buffer_length).toFixed(1) + "秒("
+ Number(buffer).toFixed(1) + "%)");
"缓冲区:" + buffer_length.toFixed(1) + "秒, 最大缓冲区:"
+ this.max_buffer_time.toFixed(1) + "秒, 当前:"
+ buffer.toFixed(1) + "%");
var bts = this.buffer_time >= 1? this.buffer_time.toFixed(0) : this.buffer_time.toFixed(1);
var mbts = this.buffer_time >= 1? this.max_buffer_time.toFixed(0) : this.max_buffer_time.toFixed(1);
$("#txt_buffer").val(buffer_length.toFixed(1) + "/" + bts + "/" + mbts + "s");
$("#txt_bitrate").val(kbps.toFixed(1) + "kbps");
$("#txt_bitrate").val(kbps.toFixed(0) + "kbps");
$("#txt_fps").val(fps.toFixed(1) + "fps");
$("#txt_empty_count").val(srs_player.empty_count() + "次卡顿");
$("#txt_empty_count").val(srs_player.empty_count() + "次");
$("#txt_fluency").val(srs_player.fluency().toFixed(2) + "%");
var time_str = "";
@ -619,39 +668,32 @@
}
if (true) {
$("#btn_bt_0_1").click(function(){
select_buffer_time("#btn_bt_0_1", 0.1);
});
$("#btn_bt_0_2").click(function(){
select_buffer_time("#btn_bt_0_2", 0.2);
});
$("#btn_bt_0_3").click(function(){
select_buffer_time("#btn_bt_0_3", 0.3);
});
$("#btn_bt_0_5").click(function(){
select_buffer_time("#btn_bt_0_5", 0.5);
});
$("#btn_bt_0_8").click(function(){
select_buffer_time("#btn_bt_0_8", 0.8);
});
$("#btn_bt_1").click(function(){
select_buffer_time("#btn_bt_1", 1);
});
$("#btn_bt_2").click(function(){
select_buffer_time("#btn_bt_2", 2);
});
$("#btn_bt_3").click(function(){
select_buffer_time("#btn_bt_3", 3);
});
$("#btn_bt_5").click(function(){
select_buffer_time("#btn_bt_5", 5);
});
$("#btn_bt_10").click(function(){
select_buffer_time("#btn_bt_10", 10);
});
$("#btn_bt_30").click(function(){
select_buffer_time("#btn_bt_30", 30);
});
var bts = [0.1, 0.2, 0.3, 0.5, 0.8, 1, 2, 3, 5, 10, 30];
for (var i = 0; i < bts.length; i++) {
var bt = bts[i];
var bt_id = "#btn_bt_" + bt.toFixed(1).replace(".", "_");
var bt_fun = function(id, v){
$(bt_id).click(function(){
select_buffer_time(id, v);
});
};
bt_fun(bt_id, bt);
}
}
if (true) {
var mbts = [0.6, 0.9, 1.5, 2.4, 3, 6, 9, 15, 30, 90];
for (var i = 0; i < mbts.length; i++) {
var mbt = mbts[i];
var mbt_id = "#btn_mbt_" + mbt.toFixed(1).replace(".", "_");
var mbt_fun = function(id, v){
$(mbt_id).click(function(){
select_max_buffer_time(id, v);
});
};
mbt_fun(mbt_id, mbt);
}
}
var query = parse_query_string();

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

Binary file not shown.

30
trunk/research/players/srs_player/src/srs_player.as
Unescape Escape View File

@ -123,6 +123,7 @@ package
flash.external.ExternalInterface.addCallback("__set_dar", this.js_call_set_dar);
flash.external.ExternalInterface.addCallback("__set_fs", this.js_call_set_fs_size);
flash.external.ExternalInterface.addCallback("__set_bt", this.js_call_set_bt);
flash.external.ExternalInterface.addCallback("__set_mbt", this.js_call_set_mbt);
flash.external.ExternalInterface.call(this.js_on_player_ready, this.js_id);
}
@ -228,6 +229,7 @@ package
private function js_call_pause():void {
if (this.media_stream) {
this.media_stream.pause();
log("user pause play");
}
}
@ -237,6 +239,7 @@ package
private function js_call_resume():void {
if (this.media_stream) {
this.media_stream.resume();
log("user resume play");
}
}
@ -254,6 +257,7 @@ package
user_dar_den = den;
flash.utils.setTimeout(__execute_user_set_dar, 0);
log("user set dar to " + num + "/" + den);
}
/**
@ -267,6 +271,7 @@ package
private function js_call_set_fs_size(refer:String, percent:int):void {
user_fs_refer = refer;
user_fs_percent = percent;
log("user set refer to " + refer + ", percent to" + percent);
}
/**
@ -276,8 +281,21 @@ package
private function js_call_set_bt(buffer_time:Number):void {
if (this.media_stream) {
this.media_stream.bufferTime = buffer_time;
log("user set bufferTime to " + buffer_time.toFixed(2) + "s");
}
}
/**
* set the max stream buffer time in seconds.
* @max_buffer_time the max buffer time in seconds.
* @remark this is the key feature for realtime communication by flash.
*/
private function js_call_set_mbt(max_buffer_time:Number):void {
if (this.media_stream) {
this.media_stream.bufferTimeMax = max_buffer_time;
log("user set bufferTimeMax to " + max_buffer_time.toFixed(2) + "s");
}
}
/**
* function for js to call: to stop the stream. ignore if not play.
@ -335,13 +353,16 @@ package
* @param _width, the player width.
* @param _height, the player height.
* @param buffer_time, the buffer time in seconds. recommend to >=0.5
* @param max_buffer_time, the max buffer time in seconds. recommend to 3 x buffer_time.
* @param volume, the volume, 0 is mute, 1 is 100%, 2 is 200%.
*/
private function js_call_play(url:String, _width:int, _height:int, buffer_time:Number, volume:Number):void {
private function js_call_play(url:String, _width:int, _height:int, buffer_time:Number, max_buffer_time:Number, volume:Number):void {
this.user_url = url;
this.user_w = _width;
this.user_h = _height;
log("start to play url: " + this.user_url + ", w=" + this.user_w + ", h=" + this.user_h);
log("start to play url: " + this.user_url + ", w=" + this.user_w + ", h=" + this.user_h
+ ", buffer=" + buffer_time.toFixed(2) + "s, max_buffer=" + max_buffer_time.toFixed(2) + "s, volume=" + volume.toFixed(2)
);
js_call_stop();
@ -349,7 +370,7 @@ package
this.media_conn.client = {};
this.media_conn.client.onBWDone = function():void {};
this.media_conn.addEventListener(NetStatusEvent.NET_STATUS, function(evt:NetStatusEvent):void {
trace ("NetConnection: code=" + evt.info.code);
log("NetConnection: code=" + evt.info.code);
if (evt.info.hasOwnProperty("data") && evt.info.data) {
if (evt.info.data.hasOwnProperty("srs_server")) {
@ -381,10 +402,11 @@ package
media_stream = new NetStream(media_conn);
media_stream.soundTransform = new SoundTransform(volume);
media_stream.bufferTime = buffer_time;
media_stream.bufferTimeMax = max_buffer_time;
media_stream.client = {};
media_stream.client.onMetaData = system_on_metadata;
media_stream.addEventListener(NetStatusEvent.NET_STATUS, function(evt:NetStatusEvent):void {
trace ("NetStream: code=" + evt.info.code);
log("NetStream: code=" + evt.info.code);
if (evt.info.code == "NetStream.Video.DimensionChange") {
system_on_metadata(media_metadata);

Write Preview
Loading…
Cancel
Save