update the ui, add hls player

trunk/research/players/index.html

@@ -37,5 +37,11 @@
         </div>
     </div>
 </div>
+<div class="container">
+    <hr>
+    <footer>
+        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
+    </footer>
+</div>
 </body>
 

trunk/research/players/js/srs.js

@@ -23,22 +23,50 @@ function parse_query_string(){
     return obj;
 }
 
-function build_default_url() {
+/**
+@param vhost the vhost of rtmp. default to window.location.hostname
+@param port the port of rtmp. default to 1935
+@param app the app of rtmp. default to live.
+@param stream the stream of rtmp. default to livestream.
+*/
+function build_default_rtmp_url() {
     var query = parse_query_string();
-    
+
-    var schema = (query.schema == undefined)? "rtmp":query.schema;
     var port = (query.port == undefined)? 1935:query.port;
     var vhost = (query.vhost == undefined)? window.location.hostname:query.vhost;
     var app = (query.app == undefined)? "live":query.app;
     var stream = (query.stream == undefined)? "livestream":query.stream;
-    
+
-   return schema + "://" + vhost + ":" + port + "/" + app + "/" + stream;
+    return "rtmp://" + vhost + ":" + port + "/" + app + "/" + stream;
 }
 
-function srs_init(url_obj) {
+/**
+@param vhost the vhost of hls. default to window.location.hostname
+@param hls_port the port of hls. default to window.location.port
+@param app the app of hls. default to live.
+@param stream the stream of hls. default to livestream.
+*/
+function build_default_hls_url() {
+    var query = parse_query_string();
+
+    var vhost = (query.vhost == undefined)? window.location.hostname:query.vhost;
+    var port = (query.hls_port == undefined)? window.location.port:query.hls_port;
+    var app = (query.app == undefined)? "live":query.app;
+    var stream = (query.stream == undefined)? "livestream":query.stream;
+
+    if (port == "" || port == null || port == undefined) {
+        port = 80;
+    }
+    return "http://" + vhost + ":" + port + "/" + app + "/" + stream + ".m3u8";
+}
+
+function srs_init(rtmp_url, hls_url) {
     update_nav();
     
-    if (url_obj) {
+    if (rtmp_url) {
-        $(url_obj).val(build_default_url());
+        $(rtmp_url).val(build_default_rtmp_url());
+    }
+    if (hls_url) {
+        $(hls_url).val(build_default_hls_url());
     }
 }

trunk/research/players/jwplayer6.html

@@ -13,38 +13,47 @@
         }
     </style>
     <script type="text/javascript" src="js/jwplayer.js" ></script>
-    <script>jwplayer.key="L1P3Ig76mGOK94gZ9WAAGD+Fb1VCVhoZ/Dm0fg=="</script>
+    <script type='text/javascript'>jwplayer.key = 'N8zhkmYvvRwOhz4aTGkySoEri4x+9pQwR7GHIQ=='; </script>
     <script type="text/javascript">
+        function jwplayer_play(url) {
+            $("#main_modal").show(function(){
+                $("#div_container").remove();
+                
+                var obj = $("<div/>");
+                $(obj).attr("id", "div_container");
+                
+                var player = $("<div/>");
+                $(obj).append(player);
+                $(obj).attr("id", "player_id");
+                
+                $("#player").append(obj);
+                
+                var conf = {
+                    file: url,
+                    width: "530",
+                    height: "300",
+                    autostart: true,
+                    analytics: { enabled: false}
+                };
+                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_url"));
+            srs_init("#txt_rtmp_url", "#txt_hls_url");
             
-            $("#btn_play").click(function(){
+            $("#btn_play_rtmp").click(function(){
-                $("#main_modal").show(function(){
+                var url = $("#txt_rtmp_url").val();
-                    $("#div_container").remove();
+                jwplayer_play(url);
-                    
+            });
-                    var obj = $("<div/>");
+            
-                    $(obj).attr("id", "div_container");
+            $("#btn_play_hls").click(function(){
-                    
+                var url = $("#txt_hls_url").val();
-                    var player = $("<div/>");
+                jwplayer_play(url);
-                    $(obj).append(player);
-                    $(obj).attr("id", "player_id");
-                    
-                    $("#player").append(obj);
-                    
-                    var url = $("#txt_url").val();
-                    
-                    var conf = {
-                        file: url,
-                        width: "530",
-                        height: "300",
-                        autostart: true,
-                    };
-                    jwplayer('player_id').setup(conf);
-                });
-                $("#main_modal").modal({show:true, keyboard:false});
             });
         });
     </script>
@@ -74,8 +83,14 @@
     </div>
     <div class="form-inline">
         URL:
-        <input type="text" id="txt_url" class="input-xxlarge" value=""></input>
+        <input type="text" id="txt_rtmp_url" class="input-xxlarge" value=""></input>
-        <button class="btn" id="btn_play">播放视频</button>
+        <button class="btn" id="btn_play_rtmp">播放RTMP</button>
+    </div>
+    <hr/>
+    <div class="form-inline">
+        URL:
+        <input type="text" id="txt_hls_url" class="input-xxlarge" value=""></input>
+        <button class="btn" id="btn_play_hls"> 播放HLS </button>
     </div>
     <div id="main_modal" class="modal hide fade">
         <div class="modal-header">
@@ -88,6 +103,10 @@
             <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>
 

trunk/research/players/osmf.html

@@ -99,5 +99,9 @@
             <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>

trunk/research/players/srs_bwt.html

@@ -37,5 +37,11 @@
         </div>
     </div>
 </div>
+<div class="container">
+    <hr>
+    <footer>
+        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
+    </footer>
+</div>
 </body>
 

trunk/research/players/srs_player.html

@@ -37,5 +37,11 @@
         </div>
     </div>
 </div>
+<div class="container">
+    <hr>
+    <footer>
+        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
+    </footer>
+</div>
 </body>
 

trunk/research/players/srs_publisher.html

@@ -37,5 +37,11 @@
         </div>
     </div>
 </div>
+<div class="container">
+    <hr>
+    <footer>
+        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
+    </footer>
+</div>
 </body>
 

trunk/research/players/vlc.html

@@ -41,5 +41,11 @@
 <div class="container">
     <iframe id="main_frame" width="100%" height="800" frameBorder="0"></iframe>
 </div>
+<div class="container">
+    <hr>
+    <footer>
+        <p><a href="https://github.com/winlinvip/simple-rtmp-server">SRS Team &copy; 2013</a></p>
+    </footer>
+</div>
 </body>