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

refine srs player, support set the bufferTimeMax.

Browse source
This commit is contained in:
winlin 2015-08-24 07:55:30 +08:00
parent 74d4c96423
commit b25c45c643
5 changed files with 184 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

146
trunk/research/players/srs_player.html
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) + "%");
$("#txt_bitrate").val(kbps.toFixed(1) + "kbps");
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(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();