Support HTTP-FLV and HLS for srs-player by H5. 4.0.63

trunk/research/players/rtc_player.html

@@ -49,7 +49,7 @@
     </div>
 
     <label></label>
-    <video id="rtc_media_player" width="100%" controls autoplay></video>
+    <video id="rtc_media_player" controls autoplay></video>
 
     <label></label>
     SessionID: <span id='sessionid'></span>
@@ -312,10 +312,16 @@
         var query = parse_query_string();
         srs_init_rtc("#txt_url", query);
 
-        $("#btn_play").click(startPlay);
+        $("#btn_play").click(function() {
+            $('#rtc_media_player').prop('muted', false);
+            startPlay();
+        });
+
         if (query.autostart === 'true') {
-            // For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a
             $('#rtc_media_player').prop('muted', true);
+            console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
+                'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
+
             startPlay();
         }
     });

trunk/research/players/srs_player.html

@@ -122,12 +122,25 @@
     var flvPlayer = null;
     var hlsPlayer = null;
 
+    var stopPlayers = function () {
+        if (flvPlayer) {
+            flvPlayer.destroy();
+            flvPlayer = null;
+        }
+        if (hlsPlayer) {
+            hlsPlayer.destroy();
+            hlsPlayer = null;
+        }
+    };
+
     var hide_for_error = function () {
         $('#main_flash_alert').show();
         $('#main_info').hide();
         $('#main_tips').hide();
         $('#video_player').hide();
         //$('#btn_play').hide();
+
+        stopPlayers();
     };
 
     var show_for_ok = function () {
@@ -142,11 +155,11 @@
         var r = parse_rtmp_url($("#txt_url").val());
         var url = window.location.protocol + "//" + query.host + query.pathname + "?autostart=true"
             + "&app=" + r.app + "&stream=" + r.stream + "&server=" + r.server + "&port=" + r.port;
-        url += (query.shp_identify)? "&shp_identify=" + query.shp_identify : '';
+        url += (query.shp_identify) ? "&shp_identify=" + query.shp_identify : '';
-        url += (r.vhost === "__defaultVhost__")? "&vhost=" + r.server : "&vhost=" + r.vhost;
+        url += (r.vhost === "__defaultVhost__") ? "&vhost=" + r.server : "&vhost=" + r.vhost;
-        url += (r.schema !== "rtmp")? "&schema=" + r.schema : '';
+        url += (r.schema !== "rtmp") ? "&schema=" + r.schema : '';
-        url += (query.buffer)? "&buffer=" + query.buffer : '';
+        url += (query.buffer) ? "&buffer=" + query.buffer : '';
-        url += (query.api_port)? "&api_port=" + query.api_port : '';
+        url += (query.api_port) ? "&api_port=" + query.api_port : '';
 
         var queries = user_extra_params(query);
         queries = user_extra_params(r, queries);
@@ -157,20 +170,18 @@
         $("#player_url").text($("#txt_url").val()).attr("href", url);
         $("#link_url").attr("href", url);
 
-        // Stop players.
-        if (flvPlayer) {
-            flvPlayer.destroy();
-        }
-        if (hlsPlayer) {
-            hlsPlayer.destroy();
-        }
-
         // For RTMP, not support.
         if (r.schema === 'rtmp') {
             hide_for_error();
             return;
         }
 
+        return r;
+    };
+
+    var start_play = function (r) {
+        stopPlayers();
+
         // Start play HTTP-FLV.
         if (r.stream.indexOf('.flv') > 0) {
             if (!flvjs.isSupported()) {
@@ -211,7 +222,9 @@
     });
 
     $("#btn_play").click(function(){
-        apply_url_change();
+        $('#video_player').prop('muted', false);
+        var r = apply_url_change();
+        start_play(r);
     });
 
     /****
@@ -238,7 +251,12 @@
     srs_init_rtmp("#txt_url");
 
     if (query.autostart === "true") {
-        apply_url_change();
+        $('#video_player').prop('muted', true);
+        console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
+            'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
+
+        var r = apply_url_change();
+        start_play(r);
     }
 </script>
 </html>