refine ui, unify the player size

trunk/research/players/js/srs.js

@@ -80,11 +80,19 @@ function build_default_hls_url() {
 }
 
 /**
-* initialize the page.
+* player specified size.
-* @param rtmp_url the rtmp stream url to play
-* @param hls_url the hls stream url to play
 */
-function srs_init(rtmp_url, hls_url) {
+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 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, 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");
+    }
 }
 
 //////////////////////////////////////////////////////////////////////////////////

trunk/research/players/jwplayer6.html

@@ -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",
+                    width: srs_get_player_width(),
-                    height: "300",
+                    height: srs_get_player_height(),
                     autostart: true,
                     analytics: { enabled: false}
                 };

trunk/research/players/osmf.html

@@ -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");

trunk/research/players/srs_player.html

@@ -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="modal-footer" id="my_modal_footer">
-            <div class="input-prepend" style="margin-top: 10px;">
+            <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>

trunk/research/players/srs_player/src/srs_player.as

@@ -258,8 +258,12 @@ package
                     // TODO: FIXME: failed event.
                 });
                 
-                var streamName:String = url.substr(url.lastIndexOf("/"));
+                if (url.indexOf("http") == 0) {
-                stream.play(streamName);
+                    stream.play(url);
+                } else {
+                    var streamName:String = url.substr(url.lastIndexOf("/"));
+                    stream.play(streamName);
+                }
                 
                 video = new Video();
                 video.width = _width;
@@ -274,8 +278,12 @@ package
                 setChildIndex(video, 0);
             });
             
-            var tcUrl:String = this.url.substr(0, this.url.lastIndexOf("/"));
+            if (url.indexOf("http") == 0) {
-            this.conn.connect(tcUrl);
+                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 {