<!DOCTYPE html> <html> <head> <title>SRS</title> <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> <script type="text/javascript" src="js/json2.js"></script> <script type="text/javascript" src="js/srs.page.js"></script> <script type="text/javascript" src="js/srs.log.js"></script> <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> <style> 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; var url = null; var __active_dar = null; function select_dar(dar_id, num, den) { srs_player.set_dar(num, den); if (__active_dar) { __active_dar.removeClass("active"); } __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"); } 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"); } $(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", null, "#main_modal"); $("#fs_tips").tooltip({ title: "点击视频进入或退出全屏" }); $("#main_modal").on("show", function(){ if (srs_player) { return; } $("#div_container").remove(); var div_container = $("<div/>"); $(div_container).attr("id", "div_container"); $("#player").append(div_container); var player = $("<div/>"); $(player).attr("id", "player_id"); $(div_container).append(player); 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_8", 0.8); this.play(url); }; srs_player.on_player_metadata = function(metadata) { $("#btn_dar_original").text("视频原始比例" + "(" + metadata.width + ":" + metadata.height + ")"); select_dar("#btn_dar_original", 0, 0); select_fs_size("#btn_fs_size_screen_100", "screen", 100); }; srs_player.on_player_timer = function(time, buffer_length) { var buffer = buffer_length / this.buffer_time * 100; $("#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); }; srs_player.start(); }); $("#main_modal").on("hide", function(){ if ($("#main_modal").is(":visible")) { return; } if (srs_player) { srs_player.stop(); srs_player = null; } }); $("#btn_play").click(function(){ url = $("#txt_url").val(); $("#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(); } }); $("#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"); if (true) { $("#btn_dar_original").click(function(){ select_dar("#btn_dar_original", 0, 0); }); $("#btn_dar_21_9").click(function(){ select_dar("#btn_dar_21_9", 21, 9); }); $("#btn_dar_16_9").click(function(){ select_dar("#btn_dar_16_9", 16, 9); }); $("#btn_dar_4_3").click(function(){ select_dar("#btn_dar_4_3", 4, 3); }); $("#btn_dar_fill").click(function(){ select_dar("#btn_dar_fill", -1, -1); }); } 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); }); } 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); }); } var query = parse_query_string(); if (query.autostart == "true") { url = $("#txt_url").val(); $("#main_modal").modal({show:true, keyboard:false}); } }); </script> </head> <body> <div class="navbar navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> <a id="srs_index" class="brand" href="#">SRS</a> <div class="nav-collapse collapse"> <ul class="nav"> <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> <li><a id="nav_srs_chat" href="srs_chat.html">SRS会议</a></li> <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> </ul> </div> </div> </div> </div> <div class="container"> <div class="alert alert-info fade in"> <button type="button" class="close" data-dismiss="alert">×</button> <strong><span>Usage:</span></strong> <span>输入RTMP/HTTP地址后点击“播放视频”即可播放视频</span> </div> <div class="form-inline"> URL: <input type="text" id="txt_url" class="input-xxlarge" value=""></input> <button class="btn btn-primary" id="btn_play">播放视频</button> </div> <div class="container"> <hr/> <span> 注意:必须按照<a href="https://github.com/winlinvip/simple-rtmp-server/blob/master/README.md">SRS README.md</a> 中的11个Step做完,下面所有的链接才能观看。 </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"> <a href="#" id="srs_publish_hls" target="_blank">http://demo.srs.com/live/livestream.m3u8</a> <br/> <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/> <span>对原始流加了<a href="http://ffmpeg.org/ffmpeg-filters.html#drawtext-1">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="#collapse11"> <strong>[4] SRS示例播放流: 转码配置LD流HLS</strong> </span> </div> <div id="collapse11" class="accordion-body collapse"> <div class="accordion-inner"> <a href="#" id="srs_publish_ld_hls" target="_blank">http://demo.srs.com/live/livestream_ld.m3u8</a> <br/> <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"> <a href="#" id="srs_publish_sd_hls" target="_blank">http://demo.srs.com/live/livestream_sd.m3u8</a> <br/> <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"> <a href="#" id="srs_publish_fw_hls" target="_blank">http://demo.srs.com/forward/live/livestream.m3u8</a> <br/> <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"> <a href="#" id="srs_publish_fw_ld_hls" target="_blank">http://demo.srs.com/forward/live/livestream_ld.m3u8</a> <br/> <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"> <a href="#" id="srs_publish_fw_sd_hls" target="_blank">http://demo.srs.com/forward/live/livestream_sd.m3u8</a> <br/> <span>对转发转码配置SD流进行HLS切片,所有转发的流会自动支持HLS。</span> </div> </div> </div> </div> </div> <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><a href="https://github.com/winlinvip/simple-rtmp-server">SrsPlayer</a></h3> </div> <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> </div> <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> <div class="btn-group dropup"> <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> 全屏大小<span class="caret"></span> </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"> <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> <li><a id="btn_dar_fill" href="#">填充(容器比例)</a></li> </ul> </div> <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_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> </div> <div class="btn-group dropup"> <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button> </div> </div> </div> <footer> <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team © 2013</a></p> </footer> </div> </body>