胡斌 / srs

转到一个项目
Toggle navigation Toggle navigation pinning
winlin
65a5f4d4 1 parent 21c60012

refine ui, unify the player size

内嵌 并排对比
正在显示 6 个修改的文件 包含 56 行增加 和 16 行删除
... ... @@ -80,11 +80,19 @@ function build_default_hls_url() {
}
/**
* player specified size.
*/
function srs_get_player_modal() { return 740; }
function srs_get_player_width() { return srs_get_player_modal() - 30; }
function srs_get_player_height() { return srs_get_player_width() * 9 / 19; }
/**
* initialize the page.
* @param rtmp_url the rtmp stream url to play
* @param hls_url the hls stream url to play
* @param rtmp_url the div id contains the rtmp stream url to play
* @param hls_url the div id contains the hls stream url to play
* @param modal_player the div id contains the modal player
*/
function srs_init(rtmp_url, hls_url) {
function srs_init(rtmp_url, hls_url, modal_player) {
update_nav();
if (rtmp_url) {
... ... @@ -93,6 +101,10 @@ function srs_init(rtmp_url, hls_url) {
if (hls_url) {
$(hls_url).val(build_default_hls_url());
}
if (modal_player) {
$(modal_player).width(srs_get_player_modal() + "px");
$(modal_player).css("margin-left", "-" + srs_get_player_modal() / 2 +"px");
}
}
//////////////////////////////////////////////////////////////////////////////////
... ...
... ... @@ -11,6 +11,10 @@
body{
padding-top: 55px;
}
#main_modal {
width: 700px;
margin-left: -350px;
}
</style>
<script type="text/javascript" src="js/jwplayer.js" ></script>
<script type='text/javascript'>jwplayer.key = 'N8zhkmYvvRwOhz4aTGkySoEri4x+9pQwR7GHIQ=='; </script>
... ... @@ -21,7 +25,7 @@
// 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");
srs_init("#txt_rtmp_url", "#txt_hls_url", "#main_modal");
$("#main_modal").on("hide", function(){
$("#div_container").remove();
... ... @@ -42,8 +46,8 @@
var conf = {
file: _url,
width: "530",
height: "300",
width: srs_get_player_width(),
height: srs_get_player_height(),
autostart: true,
analytics: { enabled: false}
};
... ...
... ... @@ -12,6 +12,10 @@
body{
padding-top: 55px;
}
#main_modal {
width: 700px;
margin-left: -350px;
}
</style>
<script type="text/javascript">
function osmf_play(url) {
... ... @@ -41,7 +45,7 @@
swfobject.embedSWF(
"js/StrobeMediaPlayback.swf", "player_id",
530, 300,
srs_get_player_width(), srs_get_player_height(),
"11.1", "js/AdobeFlashPlayerInstall.swf",
flashvars, params, attributes
);
... ... @@ -50,7 +54,7 @@
// 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"));
srs_init("#txt_url", null, "#main_modal");
$("#main_modal").on("hide", function(){
osmf_play("http://localhost");
... ...
... ... @@ -12,6 +12,17 @@
body{
padding-top: 55px;
}
#my_modal_footer {
margin-top: -20px;
padding-top: 3px;
}
#div_play_time {
margin-top: 10px;
}
#pb_buffer_bg {
margin-top: -4px;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
var srs_player = null;
... ... @@ -56,7 +67,7 @@
// 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"));
srs_init("#txt_url", null, "#main_modal");
$("#fs_tips").tooltip({
title: "点击视频进入或退出全屏"
... ... @@ -80,7 +91,8 @@
var url = $("#txt_url").val();
srs_player = new SrsPlayer("player_id", url, 530, 300);
srs_player = new SrsPlayer("player_id", url,
srs_get_player_width(), srs_get_player_height());
srs_player.on_player_ready = function() {
srs_player.play();
}
... ... @@ -240,7 +252,7 @@
<div id="main_modal" class="modal hide fade">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>SrsPlayer</h3>
<h3><a href="https://github.com/winlinvip/simple-rtmp-server">SrsPlayer</a></h3>
</div>
<div class="modal-body">
<div id="player"></div>
... ... @@ -248,8 +260,8 @@
<div class="bar" style="width: 0%;" id="pb_buffer"></div>
</div>
</div>
<div class="modal-footer" style="margin-top:-20px;">
<div class="input-prepend" style="margin-top: 10px;">
<div class="modal-footer" id="my_modal_footer">
<div class="input-prepend" id="div_play_time">
<span class="add-on" title="播放时长">@T</span>
<input class="span2" style="width:85px" id="txt_time" type="text" placeholder="天 时:分:秒">
</div>
... ... @@ -258,7 +270,7 @@
<a id="fs_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
<img src="img/tooltip.png"/>
</a>
大小<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>
... ... @@ -270,11 +282,11 @@
</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>
<li><a id="btn_dar_16_9" href="#">宽屏电影(16: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>
<li><a id="btn_dar_fill" href="#">填充(容器比例)</a></li>
</ul>
... ...
... ... @@ -258,8 +258,12 @@ package
// TODO: FIXME: failed event.
});
if (url.indexOf("http") == 0) {
stream.play(url);
} else {
var streamName:String = url.substr(url.lastIndexOf("/"));
stream.play(streamName);
}
video = new Video();
video.width = _width;
... ... @@ -274,9 +278,13 @@ package
setChildIndex(video, 0);
});
if (url.indexOf("http") == 0) {
this.conn.connect(null);
} else {
var tcUrl:String = this.url.substr(0, this.url.lastIndexOf("/"));
this.conn.connect(tcUrl);
}
}
private function on_metadata(metadata:Object):void {
this.metadata = metadata;
... ...