Blame view

trunk/research/players/srs_player.html 25.3 KB
1 2 3
<!DOCTYPE html>
<html>
<head>
winlin authored
4
    <title>SRS</title>   
5 6 7 8 9
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/swfobject.js"></script>
10
    <script type="text/javascript" src="js/json2.js"></script>
winlin authored
11
    <script type="text/javascript" src="js/srs.page.js"></script>
12
    <script type="text/javascript" src="js/srs.log.js"></script>
winlin authored
13 14 15
    <script type="text/javascript" src="js/srs.player.js"></script>
    <script type="text/javascript" src="js/srs.publisher.js"></script>
    <script type="text/javascript" src="js/srs.utility.js"></script>
16 17 18 19
    <style>
        body{
            padding-top: 55px;
        }
20 21 22 23 24 25 26 27 28 29 30
        #my_modal_footer {
            margin-top: -20px;
            padding-top: 3px;
        }
        #div_play_time {
            margin-top: 10px;
        }
        #pb_buffer_bg {
            margin-top: -4px;
            margin-bottom: 10px;
        }
31 32
    </style>
    <script type="text/javascript">
33
        var srs_player = null;
34
        var url = null;
35 36 37
        
        var __active_dar = null;
        function select_dar(dar_id, num, den) {
winlin authored
38
            srs_player.set_dar(num, den);
39 40 41
            
            if (__active_dar) {
                __active_dar.removeClass("active");
42
            }
43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
            
            __active_dar = $(dar_id).parent();
            __active_dar.addClass("active");
        }
        
        var __active_size = null;
        function select_fs_size(size_id, refer, percent) {
            srs_player.set_fs(refer, percent);
            
            if (__active_size) {
                __active_size.removeClass("active");
            }
            
            __active_size = $(size_id).parent();
            __active_size.addClass("active");
58 59
        }
        
60 61 62 63 64 65 66 67 68 69 70 71
        var __active_bt = null;
        function select_buffer_time(bt_id, buffer_time) {
            srs_player.set_bt(buffer_time);
            
            if (__active_bt) {
                __active_bt.removeClass("active");
            }
            
            __active_bt = $(bt_id).parent();
            __active_bt.addClass("active");
        }
        
72
        $(function(){
winlin authored
73 74 75
            // 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
76
            srs_init("#txt_url", null, "#main_modal");
winlin authored
77
            
78 79 80 81
            $("#fs_tips").tooltip({
                title: "点击视频进入或退出全屏"
            });
            
winlin authored
82
            $("#main_modal").on("show", function(){
83 84 85 86
                if (srs_player) {
                    return;
                }
                
winlin authored
87 88
                $("#div_container").remove();
                
winlin authored
89 90 91
                var div_container = $("<div/>");
                $(div_container).attr("id", "div_container");
                $("#player").append(div_container);
winlin authored
92 93
                
                var player = $("<div/>");
winlin authored
94 95
                $(player).attr("id", "player_id");
                $(div_container).append(player);
winlin authored
96
                
winlin authored
97
                srs_player = new SrsPlayer("player_id", srs_get_player_width(), srs_get_player_height());
winlin authored
98
                srs_player.on_player_ready = function() {
winlin authored
99
                    select_buffer_time("#btn_bt_0_8", 0.8);
100
                    this.play(url);
winlin authored
101
                };
102 103
                srs_player.on_player_metadata = function(metadata) {
                    $("#btn_dar_original").text("视频原始比例" + "(" + metadata.width + ":" + metadata.height + ")");
104 105
                    select_dar("#btn_dar_original", 0, 0);
                    select_fs_size("#btn_fs_size_screen_100", "screen", 100);
winlin authored
106
                };
107
                srs_player.on_player_timer = function(time, buffer_length) {
108
                    var buffer = buffer_length / this.buffer_time * 100;
109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128
                    $("#pb_buffer").width(Number(buffer).toFixed(1) + "%");
                    
                    $("#pb_buffer_bg").attr("title", 
                        "缓冲区长度:" + Number(buffer_length).toFixed(1) + "秒(" 
                        + Number(buffer).toFixed(1) + "%)");
                    
                    var time_str = "";
                    // day
                    time_str = padding(parseInt(time / 24 / 3600), 2, '0') + " ";
                    // hour
                    time = time % (24 * 3600);
                    time_str += padding(parseInt(time / 3600), 2, '0') + ":";
                    // minute
                    time = time % (3600);
                    time_str += padding(parseInt(time / 60), 2, '0') + ":";
                    // seconds
                    time = time % (60);
                    time_str += padding(parseInt(time), 2, '0');
                    // show
                    $("#txt_time").val(time_str);
winlin authored
129
                };
winlin authored
130 131
                srs_player.start();
            });
winlin authored
132
            
winlin authored
133
            $("#main_modal").on("hide", function(){
134 135 136 137 138 139 140 141
                if ($("#main_modal").is(":visible")) {
                    return;
                }
                
                if (srs_player) {
                    srs_player.stop();
                    srs_player = null;
                }
winlin authored
142 143
            });
            
144
            $("#btn_play").click(function(){
145
                url = $("#txt_url").val();
146 147 148 149
                $("#main_modal").modal({show:true, keyboard:false});
            });
            
            $("#btn_pause").click(function(){
150 151
                if ($("#btn_pause").text() == "暂停") {
                    $("#btn_pause").text("继续");
152 153
                    srs_player.pause();
                } else {
154
                    $("#btn_pause").text("暂停");
155 156 157 158
                    srs_player.resume();
                }
            });
            
159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
            $("#srs_publish").click(function(){
                url = $("#srs_publish").text();
                $("#main_modal").modal({show:true, keyboard:false});
            });
            $("#srs_publish_ld").click(function(){
                url = $("#srs_publish_ld").text();
                $("#main_modal").modal({show:true, keyboard:false});
            });
            $("#srs_publish_sd").click(function(){
                url = $("#srs_publish_sd").text();
                $("#main_modal").modal({show:true, keyboard:false});
            });
            $("#srs_publish_fw").click(function(){
                url = $("#srs_publish_fw").text();
                $("#main_modal").modal({show:true, keyboard:false});
            });
            $("#srs_publish_fw_ld").click(function(){
                url = $("#srs_publish_fw_ld").text();
                $("#main_modal").modal({show:true, keyboard:false});
            });
            $("#srs_publish_fw_sd").click(function(){
                url = $("#srs_publish_fw_sd").text();
                $("#main_modal").modal({show:true, keyboard:false});
            });
            
            var query = parse_query_string();
            var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?vhost=demo.srs.com&app=live&hls_autostart=true";
            $("#srs_publish_hls").attr("href", jwplayer_url + "&stream=livestream");
            $("#srs_publish_ld_hls").attr("href", jwplayer_url + "&stream=livestream_ld");
            $("#srs_publish_sd_hls").attr("href", jwplayer_url + "&stream=livestream_sd");
            var jwplayer_url = "http://" + query.host + query.dir + "/jwplayer6.html?vhost=demo.srs.com&app=forward/live&hls_autostart=true";
            $("#srs_publish_fw_hls").attr("href", jwplayer_url + "&stream=livestream");
            $("#srs_publish_fw_ld_hls").attr("href", jwplayer_url + "&stream=livestream_ld");
            $("#srs_publish_fw_sd_hls").attr("href", jwplayer_url + "&stream=livestream_sd");
            
194 195 196 197 198
            if (true) {
                $("#btn_dar_original").click(function(){
                    select_dar("#btn_dar_original", 0, 0);
                });
                $("#btn_dar_21_9").click(function(){
199
                    select_dar("#btn_dar_21_9", 21, 9);
200 201
                });
                $("#btn_dar_16_9").click(function(){
202
                    select_dar("#btn_dar_16_9", 16, 9);
203 204
                });
                $("#btn_dar_4_3").click(function(){
205
                    select_dar("#btn_dar_4_3", 4, 3);
206 207 208 209
                });
                $("#btn_dar_fill").click(function(){
                    select_dar("#btn_dar_fill", -1, -1);
                });
210
            }
211
            
212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230
            if (true) {
                $("#btn_fs_size_video_100").click(function(){
                    select_fs_size("#btn_fs_size_video_100", "video", 100);
                });
                $("#btn_fs_size_video_75").click(function(){
                    select_fs_size("#btn_fs_size_video_75", "video", 75);
                });
                $("#btn_fs_size_video_50").click(function(){
                    select_fs_size("#btn_fs_size_video_50", "video", 50);
                });
                $("#btn_fs_size_screen_100").click(function(){
                    select_fs_size("#btn_fs_size_screen_100", "screen", 100);
                });
                $("#btn_fs_size_screen_75").click(function(){
                    select_fs_size("#btn_fs_size_screen_75", "screen", 75);
                });
                $("#btn_fs_size_screen_50").click(function(){
                    select_fs_size("#btn_fs_size_screen_50", "screen", 50);
                });
231
            }
232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258
            
            if (true) {
                $("#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);
                });
            }
winlin authored
259 260 261
            
            var query = parse_query_string();
            if (query.autostart == "true") {
winlin authored
262
                url = $("#txt_url").val();
winlin authored
263 264
                $("#main_modal").modal({show:true, keyboard:false});
            }
265
        });
266 267 268 269 270 271
    </script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
272
            <a id="srs_index" class="brand" href="#">SRS</a>
273 274
            <div class="nav-collapse collapse">
                <ul class="nav">
winlin authored
275 276
                    <li class="active"><a id="nav_srs_player" href="srs_player.html">SRS播放器</a></li>
                    <li><a id="nav_srs_publisher" href="srs_publisher.html">SRS编码器</a></li>
277
                    <li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li>
winlin authored
278 279 280 281
                    <li><a id="nav_srs_bwt" href="srs_bwt.html">SRS测网速</a></li>
                    <li><a id="nav_jwplayer6" href="jwplayer6.html">JWPlayer6播放器</a></li>
                    <li><a id="nav_osmf" href="osmf.html">AdobeOSMF播放器</a></li>
                    <li><a id="nav_vlc" href="vlc.html">VLC播放器</a></li>
282 283 284 285 286
                </ul>
            </div>
        </div>
    </div>
</div>
winlin authored
287
<div class="container">
winlin authored
288 289
    <div class="alert alert-info fade in">
        <button type="button" class="close" data-dismiss="alert">×</button>
290
        <strong><span>Usage:</span></strong> <span>输入RTMP/HTTP地址后点击“播放视频”即可播放视频</span>
winlin authored
291 292 293 294
    </div>
    <div class="form-inline">
        URL:
        <input type="text" id="txt_url" class="input-xxlarge" value=""></input>
295
        <button class="btn btn-primary" id="btn_play">播放视频</button>
winlin authored
296
    </div>
297 298 299
    <div class="container">
        <hr/>
        <span>
winlin authored
300 301
            注意:必须按照<a href="https://github.com/winlinvip/simple-rtmp-server/wiki/SampleDemo">SRS DEMO</a>
            启动和设置服务器,下面所有的链接才能观看。
302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324
        </span>
        <div class="accordion" id="main_accordion">
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse1">
                        <strong>[1] SRS示例播放流: 原始流</strong>
                    </span>
                </div>
                <div id="collapse1" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <a href="#" id="srs_publish">rtmp://demo.srs.com/live/livestream</a> <br/>
                        <span>用户推送过来的唯一一路流,经过服务器的多种变换和再转发。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse10">
                        <strong>[2] SRS示例播放流: 原始流HLS</strong>
                    </span>
                </div>
                <div id="collapse10" class="accordion-body collapse">
                    <div class="accordion-inner">
winlin authored
325
                        <a href="#" id="srs_publish_hls" target="_blank">http://demo.srs.com/live/livestream.m3u8</a> <br/>
326 327 328 329 330 331 332 333 334 335 336 337 338
                        <span>对用户的流进行HLS切片(若编码为非H264/AAC,HLS流会自动禁用)。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse2">
                        <strong>[3] SRS示例播放流: 转码配置LD流</strong>
                    </span>
                </div>
                <div id="collapse2" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <a href="#" id="srs_publish_ld">rtmp://demo.srs.com/live/livestream_ld</a> <br/>
339
                        <span>对原始流加了<a href="http://ffmpeg.org/ffmpeg-filters.html#overlay">FFMPEG图片水印</a></span>
340 341 342 343 344 345 346 347 348 349 350
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse11">
                        <strong>[4] SRS示例播放流: 转码配置LD流HLS</strong>
                    </span>
                </div>
                <div id="collapse11" class="accordion-body collapse">
                    <div class="accordion-inner">
winlin authored
351
                        <a href="#" id="srs_publish_ld_hls" target="_blank">http://demo.srs.com/live/livestream_ld.m3u8</a> <br/>
352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376
                        <span>对转码配置LD流进行HLS切片。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse3">
                        <strong>[5] SRS示例播放流: 转码配置SD流</strong>
                    </span>
                </div>
                <div id="collapse3" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <a href="#" id="srs_publish_sd">rtmp://demo.srs.com/live/livestream_sd</a> <br/>
                        <span>对原始流应用了<a href="http://ffmpeg.org/ffmpeg-filters.html#Filtering-Introduction">FFMPEG翻转滤镜</a></span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse12">
                        <strong>[6] SRS示例播放流: 转码配置SD流HLS</strong>
                    </span>
                </div>
                <div id="collapse12" class="accordion-body collapse">
                    <div class="accordion-inner">
winlin authored
377
                        <a href="#" id="srs_publish_sd_hls" target="_blank">http://demo.srs.com/live/livestream_sd.m3u8</a> <br/>
378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402
                        <span>对转码配置SD流进行HLS切片。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse4">
                        <strong>[7] SRS示例播放流: 转发原始流</strong>
                    </span>
                </div>
                <div id="collapse4" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <a href="#" id="srs_publish_fw">rtmp://demo.srs.com:19350/live/livestream</a> <br/>
                        <span>将用户推送的流转发到另外的vhost或服务器,做热备用。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse13">
                        <strong>[8] SRS示例播放流: 转发原始流HLS</strong>
                    </span>
                </div>
                <div id="collapse13" class="accordion-body collapse">
                    <div class="accordion-inner">
winlin authored
403
                        <a href="#" id="srs_publish_fw_hls" target="_blank">http://demo.srs.com/forward/live/livestream.m3u8</a> <br/>
404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428
                        <span>对转发原始流进行HLS切片(若编码为非H264/AAC,HLS流会自动禁用)。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse5">
                        <strong>[9] SRS示例播放流: 转发转码配置LD流</strong>
                    </span>
                </div>
                <div id="collapse5" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <a href="#" id="srs_publish_fw_ld">rtmp://demo.srs.com:19350/live/livestream_ld</a> <br/>
                        <span>FFMPEG加水印后的流也会自动转发。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse14">
                        <strong>[10] SRS示例播放流: 转发转码配置LD流HLS</strong>
                    </span>
                </div>
                <div id="collapse14" class="accordion-body collapse">
                    <div class="accordion-inner">
winlin authored
429
                        <a href="#" id="srs_publish_fw_ld_hls" target="_blank">http://demo.srs.com/forward/live/livestream_ld.m3u8</a> <br/>
430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451 452 453 454
                        <span>对转发转码配置LD流进行HLS切片,所有转发的流会自动支持HLS。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse6">
                        <strong>[11] SRS示例播放流: 转发转码配置SD流</strong>
                    </span>
                </div>
                <div id="collapse6" class="accordion-body collapse">
                    <div class="accordion-inner">
                        <a href="#" id="srs_publish_fw_sd">rtmp://demo.srs.com:19350/live/livestream_sd</a> <br/>
                        <span>FFMPEG翻转后的流也会自动转发。</span>
                    </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <span class="accordion-toggle" data-toggle="collapse" data-parent="#main_accordion" href="#collapse15">
                        <strong>[12] SRS示例播放流: 转发转码配置SD流HLS</strong>
                    </span>
                </div>
                <div id="collapse15" class="accordion-body collapse">
                    <div class="accordion-inner">
winlin authored
455
                        <a href="#" id="srs_publish_fw_sd_hls" target="_blank">http://demo.srs.com/forward/live/livestream_sd.m3u8</a> <br/>
456 457 458 459 460 461
                        <span>对转发转码配置SD流进行HLS切片,所有转发的流会自动支持HLS。</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
winlin authored
462 463 464
    <div id="main_modal" class="modal hide fade">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
465
            <h3><a href="https://github.com/winlinvip/simple-rtmp-server">SrsPlayer</a></h3>
winlin authored
466
        </div>
467 468 469 470 471
        <div class="modal-body">
            <div id="player"></div>
            <div class="progress progress-striped active" id="pb_buffer_bg">
                <div class="bar" style="width: 0%;" id="pb_buffer"></div>
            </div>
winlin authored
472
        </div>
473 474
        <div class="modal-footer" id="my_modal_footer">
            <div class="input-prepend" id="div_play_time">
475 476 477
              <span class="add-on" title="播放时长">@T</span>
              <input class="span2" style="width:85px" id="txt_time" type="text" placeholder="天 时:分:秒">
            </div>
478
            <div class="btn-group dropup">
479 480 481 482
                <button class="btn dropdown-toggle" data-toggle="dropdown">
                    <a id="fs_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
                        <img src="img/tooltip.png"/>
                    </a>
483
                    全屏大小<span class="caret"></span>
484 485 486 487 488 489 490 491 492 493 494
                </button>
                <ul class="dropdown-menu">
                    <li><a id="btn_fs_size_screen_100" href="#">屏幕大小(100%)</a></li>
                    <li><a id="btn_fs_size_screen_75" href="#">屏幕大小(75%)</a></li>
                    <li><a id="btn_fs_size_screen_50" href="#">屏幕大小(50%)</a></li>
                    <li><a id="btn_fs_size_video_100" href="#">视频大小(100%)</a></li>
                    <li><a id="btn_fs_size_video_75" href="#">视频大小(75%)</a></li>
                    <li><a id="btn_fs_size_video_50" href="#">视频大小(50%)</a></li>
                </ul>
            </div>
            <div class="btn-group dropup">
495
                <button class="btn dropdown-toggle" data-toggle="dropdown">显示比例<span class="caret"></span></button>
496 497 498
                <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>
499
                    <li><a id="btn_dar_16_9" href="#">宽屏电视(16:9)</a></li>
500
                    <li><a id="btn_dar_4_3" href="#">窄屏(4:3)</a></li>
501
                    <li><a id="btn_dar_fill" href="#">填充(容器比例)</a></li>
502 503
                </ul>
            </div>
504
            <div class="btn-group dropup">
505 506 507 508 509 510 511 512 513 514 515 516 517 518
                <button class="btn dropdown-toggle" data-toggle="dropdown">缓冲区<span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <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>
                </ul>
            </div>
            <div class="btn-group dropup">
                <button id="btn_pause" class="btn">暂停</button>
519 520 521 522
            </div>
            <div class="btn-group dropup">
                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
winlin authored
523 524
        </div>
    </div>
winlin authored
525 526 527 528
    <footer>
        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
    </footer>
</div>
winlin authored
529
</body>