srs_bwt.html 5.2 KB
<!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/srs.js"></script>
    <style>
        body{
            padding-top: 55px;
        }
        #main_modal {
            width: 600px;
            margin-left: -300px;
        }
        #check_status {
            margin-left: 20px;
            margin-top: -55px;
        }
        #pb_buffer_bg {
            margin-top: 40px;
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript">

            function update_progress(percent) {
                    $("#progress_bar").width(percent);
            }

            function progress_reset() {
                    $("#progress_bar").width("0%");
            }

            function update_status(text) {
                $("#check_status").text(text);
            }
			
			function get_swf_width() {
				return 1;
			}
			
			function get_swf_height() {
				return 1;
			}
			
			function show_modal() {
				$("#main_modal").modal({show:true, keyboard:false});
			}

            function band_check(url) {

            // remove flash contet
            var bw_div = $("<div/>");
            $(bw_div).attr("id", "bw_div");
            $("#bw_center").append(bw_div);

            var flashvars = {};
            flashvars.url = url;
            flashvars.update_progress = "update_progress";
            flashvars.progress_reset  = "progress_reset";
			flashvars.update_status   = "update_status";

            var params = {};
            params.allowFullScreen = true;
			
            var attributes = {};

            swfobject.embedSWF(
                "srs_bwt/release/srs_bwt.swf", "bw_div",
                get_swf_width(), get_swf_height(),
                "11.1.0", "js/AdobeFlashPlayerInstall.swf",
                flashvars, params, attributes
            );
        }

        $(function(){
            update_nav();
			srs_init_bwt("#txt_url");
			
			var txt_input = $("#txt_url").val();
			// if valid ?
			if (!srs_bwt_check_url(txt_input)) {
				$("#txt_url").val(srs_bwt_build_default_url());
			}
			
            $("#main_modal").on(
                "show",
                function()
                {
					progress_reset();
					update_status("");
                   var url = $("#txt_url").val();
				   /*!
						url encode
				   */
				   url = escape(url);	
                   band_check(url);
                }
             );

            $("#main_modal").on("hide", function(){
                $("#bw_div").remove();
            });

            $("#btn_play").click(
                function()
                {
                    $("#main_modal").modal({show:true, keyboard:false});
                }
             );
        });	
    </script>
</head>
<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
        <a class="brand" href="index.html">SRS</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li><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 class="active"><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="form-inline">
         URL:
         <input type="text" id="txt_url" class="input-xxlarge" value="" placeholder="例如:rtmp://host:port/app?key=xx&vhost=yy"></input>
         <button class="btn btn-primary" id="btn_play">开始测速</button>
     </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>SRS Band Check</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: 50%;" id="progress_bar"></div>
             </div>
         </div>

         <div class="modal-body" id="bw_center">
         </div>
         <span id="check_status1"><font ><strong id="check_status">status</strong></font> </span>

         <div class="modal-footer">
             <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true"> 关闭 </button>
         </div>
     </div>

    <hr>
    <footer>
        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
    </footer>
</div>
</body>