update the srs player, set the DAR.

@@ -15,8 +15,14 @@
     <script type="text/javascript" src="js/jwplayer.js" ></script>
     <script type='text/javascript'>jwplayer.key = 'N8zhkmYvvRwOhz4aTGkySoEri4x+9pQwR7GHIQ=='; </script>
     <script type="text/javascript">
-        function jwplayer_play(url) {
         var _player = null;
+        var _url = null;
+        $(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_rtmp_url", "#txt_hls_url");
+            
             $("#main_modal").on("hide", function(){
                 $("#div_container").remove();
                 _player.stop();
@@ -35,7 +41,7 @@
                 $("#player").append(obj);
                 
                 var conf = {
-                    file: url,
+                    file: _url,
                     width: "530",
                     height: "300",
                     autostart: true,
@@ -44,23 +50,14 @@
                 _player = jwplayer('player_id').setup(conf);
             });
             
-            $("#main_modal").modal({show:true, keyboard:false});
-        }
-        
-        $(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_rtmp_url", "#txt_hls_url");
-            
             $("#btn_play_rtmp").click(function(){
-                var url = $("#txt_rtmp_url").val();
-                jwplayer_play(url);
+                _url = $("#txt_rtmp_url").val();
+                $("#main_modal").modal({show:true, keyboard:false});
             });
             
             $("#btn_play_hls").click(function(){
-                var url = $("#txt_hls_url").val();
-                jwplayer_play(url);
+                _url = $("#txt_hls_url").val();
+                $("#main_modal").modal({show:true, keyboard:false});
             });
         });
     </script>

@@ -14,17 +14,7 @@
         }
     </style>
     <script type="text/javascript">
-        $(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"));
-            
-            $("#btn_play").click(function(){
-                $("#main_modal").on("hide", function(){
-                    $("#div_container").remove();
-                });
-                $("#main_modal").on("show", function(){
+        function osmf_play(url) {
             $("#div_container").remove();
             
             var obj = $("<div/>");
@@ -36,8 +26,6 @@
             
             $("#player").append(obj);
             
-                    var url = $("#txt_url").val();
-                    
             var flashvars = {};
             flashvars.src = url;
             flashvars.streamType = "live"; // live or recorded
@@ -57,7 +45,23 @@
                 "11.1", "js/AdobeFlashPlayerInstall.swf",
                 flashvars, params, attributes
             );
+        }
+        $(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"));
+            
+            $("#main_modal").on("hide", function(){
+                osmf_play("http://localhost");
+                $("#div_container").remove();
+            });
+            $("#main_modal").on("show", function(){
+                var url = $("#txt_url").val();
+                osmf_play(url);
             });
+            
+            $("#btn_play").click(function(){
                 $("#main_modal").modal({show:true, keyboard:false});
             });
         });

@@ -14,26 +14,14 @@
         }
     </style>
     <script type="text/javascript">
-        var srs_player = null;
-        
         $(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"));
             
-            $("#btn_play").click(on_btn_play);
-            $("#btn_pause").click(function(){
-                if ($("#btn_pause").text() == "暂停") {
-                    $("#btn_pause").text("继续");
-                    srs_player.pause();
-                } else {
-                    $("#btn_pause").text("暂停");
-                    srs_player.resume();
-                }
-            });
-        });
-        function on_btn_play(){
+            var srs_player = null;
+        
             $("#main_modal").on("show", function(){
                 $("#div_container").remove();
                 
@@ -50,9 +38,12 @@
                 
                 srs_player = new SrsPlayer("player_id", url, 530, 300, 0.8);
                 srs_player.on_player_ready = function() {
-                    // hack the callback function, do something then play.
                     return srs_player.play();
                 }
+                srs_player.on_player_metadata = function(metadata) {
+                    $("#btn_dar_original").text("视频原始比例" + "(" + metadata.width + ":" + metadata.height + ")");
+                    return 0;
+                }
                 srs_player.start();
             });
             
@@ -60,10 +51,37 @@
                 srs_player.stop();
             });
             
+            $("#btn_play").click(function(){
                 $("#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();
                 }
+            });
             
-        // the SrsPlayer object.
+            $("#btn_dar_original").click(function(){
+                srs_player.dar(0, 0);
+            });
+            $("#btn_dar_21_9").click(function(){
+                srs_player.dar(9, 21);
+            });
+            $("#btn_dar_16_9").click(function(){
+                srs_player.dar(9, 16);
+            });
+            $("#btn_dar_4_3").click(function(){
+                srs_player.dar(3, 4);
+            });
+        });
+        
+        /*
+        * the SrsPlayer object.
+        */
         function SrsPlayer(container, stream_url, width, height, buffer_time) {
             if (!SrsPlayer.__id) {
                 SrsPlayer.__id = 100;
@@ -81,18 +99,27 @@
             this.buffer_time = buffer_time;
             this.id = SrsPlayer.__id++;
             this.callbackObj = null;
+            
+            // callback set the following values.
+            this.meatadata = {}; // for on_player_metadata
         }
-        // user can set some callback, then start the player.
-        // callbacks:
-        //      on_player_ready():int, when srs player ready, user can play.
+        /*
+        * user can set some callback, then start the player.
+        * callbacks:
+        *      on_player_ready():int, when srs player ready, user can play.
+        *      on_player_metadata(metadata:Object):int, when srs player get metadata.
+        */
         SrsPlayer.prototype.start = function() {
             // embed the flash.
             var flashvars = {};
             flashvars.id = this.id;
             flashvars.on_player_ready = "__srs_on_player_ready";
+            flashvars.on_player_metadata = "__srs_on_player_metadata";
             
             var params = {};
+            params.wmode = "opaque";
             params.allowFullScreen = true;
+            params.allowScriptAccess = "always";
             
             var attributes = {};
             
@@ -114,6 +141,16 @@
             return this.callbackObj.ref.__play(this.stream_url, this.width, this.height, this.buffer_time);
         }
         SrsPlayer.prototype.stop = function() {
+            for (var i = 0; i < SrsPlayer.__players.length; i++) {
+                var player = SrsPlayer.__players[i];
+                
+                if (player.id != this.id) {
+                    continue;
+                }
+                
+                SrsPlayer.__players.splice(i, 1);
+                break;
+            }
             return this.callbackObj.ref.__stop();
         }
         SrsPlayer.prototype.pause = function() {
@@ -122,9 +159,26 @@
         SrsPlayer.prototype.resume = function() {
             return this.callbackObj.ref.__resume();
         }
+        /*
+        * to set the DAR, for example, DAR=16:9
+        * @param num, for example, 9. use metadata height if 0.
+        * @param den, for example, 16. use metadata width if 0.
+        */
+        SrsPlayer.prototype.dar = function(num, den) {
+            if (num == 0 && this.metadata) {
+                num = this.metadata.height;
+            }
+            if (den == 0 && this.metadata) {
+                den = this.metadata.width;
+            }
+            return this.callbackObj.ref.__dar(num, den);
+        }
         SrsPlayer.prototype.on_player_ready = function() {
             return this.play();
         }
+        SrsPlayer.prototype.on_player_metadata = function(metadata) {
+            return 0;
+        }
         function __srs_on_player_ready(id) {
             for (var i = 0; i < SrsPlayer.__players.length; i++) {
                 var player = SrsPlayer.__players[i];
@@ -138,6 +192,23 @@
             
             throw new Error("player not found. id=" + id);
         }
+        function __srs_on_player_metadata(id, metadata) {
+            for (var i = 0; i < SrsPlayer.__players.length; i++) {
+                var player = SrsPlayer.__players[i];
+                
+                if (player.id != id) {
+                    continue;
+                }
+                
+                // user may override the on_player_metadata, 
+                // so set the data before invoke it.
+                player.metadata = metadata;
+                
+                return player.on_player_metadata(metadata);
+            }
+            
+            throw new Error("player not found. id=" + id);
+        }
     </script>
 </head>
 <body>
@@ -176,6 +247,15 @@
         <div class="modal-body" id="player">
         </div>
         <div class="modal-footer">
+            <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>
+                </ul>
+            </div>
             <button id="btn_pause" class="btn">暂停</button>
             <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">关闭</button>
         </div>

@@ -15,14 +15,23 @@ package
     
     public class srs_player extends Sprite
     {
+        // user set id.
         private var id:String = null;
+        // user set callback
         private var on_player_ready:String = null;
+        private var on_player_metadata:String = null;
         
+        // play param url.
         private var url:String = null;
+        // play param, user set width
+        private var w:int = 0;
+        // play param, user set height.
+        private var h:int = 0;
         
         private var conn:NetConnection = null;
         private var stream:NetStream = null;
         private var video:Video = null;
+        private var metadata:Object = {};
         
         public function srs_player()
         {
@@ -51,6 +60,7 @@ package
             
             this.id = flashvars.id;
             this.on_player_ready = flashvars.on_player_ready;
+            this.on_player_metadata = flashvars.on_player_metadata;
             
             flash.utils.setTimeout(this.onJsReady, 0);
         }
@@ -66,6 +76,7 @@ package
             flash.external.ExternalInterface.addCallback("__stop", this.js_call_stop);
             flash.external.ExternalInterface.addCallback("__pause", this.js_call_pause);
             flash.external.ExternalInterface.addCallback("__resume", this.js_call_resume);
+            flash.external.ExternalInterface.addCallback("__dar", this.js_call_dar);
             
             var code:int = flash.external.ExternalInterface.call(this.on_player_ready, this.id);
             if (code != 0) {
@@ -87,6 +98,37 @@ package
             return 0;
         }
         
+        /**
+        * to set the DAR, for example, DAR=16:9
+        * @param num, for example, 9.
+        * @param den, for example, 16.
+        */
+        public function js_call_dar(num:int, den:int):int {
+            if (this.video && num > 0 && den > 0 && this.video.width > 0) {
+                // set DAR.
+                if (num < den) {
+                    // calc the height by DAR
+                    var _height:int = this.video.width * num / den;
+                    
+                    // height overflow, calc the width by DAR
+                    if (_height > this.h) {
+                        var _width:int = this.video.height * den / num;
+                        
+                        this.video.width = _width;
+                        this.video.height = this.h;
+                    } else {
+                        this.video.width = this.w;
+                        this.video.height = _height;
+                    }
+                }
+                
+                // align center.
+                this.video.y = (this.h - this.video.height) / 2;
+                this.video.x = (this.w - this.video.width) / 2;
+            }
+            return 0;
+        }
+        
         public function js_call_stop():int {
             if (this.stream) {
                 this.stream.close();
@@ -106,7 +148,14 @@ package
         
         public function js_call_play(url:String, _width:int, _height:int, _buffer_time:Number):int {
             this.url = url;
-            trace("start to play url: " + this.url);
+            this.w = _width;
+            this.h = _height;
+            trace("start to play url: " + this.url + ", w=" + this.w + ", h=" + this.h);
+            
+            // draw black bg.
+            this.graphics.beginFill(0x00, 1.0);
+            this.graphics.drawRect(0, 0, this.w, this.h);
+            this.graphics.endFill();
             
             js_call_stop();
             
@@ -122,18 +171,13 @@ package
                 stream = new NetStream(conn);
                 stream.bufferTime = _buffer_time;
                 stream.client = {};
-                stream.client.onMetaData = function(metadata:Object):void {
-                    var customItems:Array = [new ContextMenuItem("SrsPlayer")];
-                    if (metadata.hasOwnProperty("server")) {
-                        customItems.push(new ContextMenuItem("Server: " + metadata.server));
-                    }
-                    if (metadata.hasOwnProperty("contributor")) {
-                        customItems.push(new ContextMenuItem("Contributor: " + metadata.contributor));
-                    }
-                    contextMenu.customItems = customItems;
-                };
+                stream.client.onMetaData = on_metadata;
                 stream.addEventListener(NetStatusEvent.NET_STATUS, function(evt:NetStatusEvent):void {
                     trace ("NetStream: code=" + evt.info.code);
+                    
+                    if (evt.info.code == "NetStream.Video.DimensionChange") {
+                        on_metadata(metadata);
+                    }
                 });
                 stream.play(url.substr(url.lastIndexOf("/")));
                 
@@ -148,5 +192,53 @@ package
             
             return 0;
         }
+        
+        private function on_metadata(metadata:Object):void {
+            this.metadata = metadata;
+            
+            // for context menu
+            var customItems:Array = [new ContextMenuItem("SrsPlayer")];
+            if (metadata.hasOwnProperty("server")) {
+                customItems.push(new ContextMenuItem("Server: " + metadata.server));
+            }
+            if (metadata.hasOwnProperty("contributor")) {
+                customItems.push(new ContextMenuItem("Contributor: " + metadata.contributor));
+            }
+            contextMenu.customItems = customItems;
+            
+            // for js.
+            var obj:Object = {
+                width: video.width,
+                    height: video.height,
+                    server: 'srs',
+                    contributor: 'winlin'
+            };
+            
+            if (metadata.hasOwnProperty("width")) {
+                obj.width = metadata.width;
+            }
+            if (metadata.hasOwnProperty("height")) {
+                obj.height = metadata.height;
+            }
+            
+            if (video.videoWidth > 0) {
+                obj.width = video.videoWidth;
+            }
+            if (video.videoHeight > 0) {
+                obj.height = video.videoHeight;
+            }
+            
+            if (metadata.hasOwnProperty("server")) {
+                obj.server = metadata.server;
+            }
+            if (metadata.hasOwnProperty("contributor")) {
+                obj.contributor = metadata.contributor;
+            }
+            
+            var code:int = flash.external.ExternalInterface.call(on_player_metadata, id, obj);
+            if (code != 0) {
+                throw new Error("callback on_player_metadata failed. code=" + code);
+            }
+        }
     }
 }
\ No newline at end of file