For #1638, #307, refactor rtc player.

trunk/research/players/rtc_player.html

@@ -45,7 +45,7 @@
     </div>
 
     <label></label>
-    <video id="rtc_media_player" autoplay controls></video>
+    <video id="rtc_media_player" controls autoplay></video>
 
     <footer>
         <p></p>
@@ -55,11 +55,7 @@
 <script type="text/javascript">
     var pc = null; // Global handler to do cleanup when replaying.
     $(function(){
-        $('#rtc_media_player').hide();
+        var startPlay = function() {
-        var query = parse_query_string();
-        srs_init_rtc("#txt_url", query);
-
-        $("#btn_play").click(function(){
             $('#rtc_media_player').show();
             var urlObject = parse_rtmp_url($("#txt_url").val());
             var schame = window.location.protocol;
@@ -71,8 +67,7 @@
 
             pc = new RTCPeerConnection(null);
             pc.onaddstream = function (event) {
-                var player = document.getElementById('rtc_media_player');
+                $('#rtc_media_player').prop('srcObject', event.stream);
-                player.srcObject = event.stream;
             };
             new Promise(function(resolve, reject) {
                 pc.createOffer(function(offer){
@@ -125,7 +120,18 @@
             }).catch(function(reason) {
                 throw reason;
             });
-        });
+        };
+
+        $('#rtc_media_player').hide();
+        var query = parse_query_string();
+        srs_init_rtc("#txt_url", query);
+
+        $("#btn_play").click(startPlay);
+        if (query.autostart === 'true') {
+            // For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a
+            $('#rtc_media_player').prop('muted', true);
+            startPlay();
+        }
     });
 </script>
 </body>