[pureJS demo] - 检测浏览器是否支持自动播放

examples/pureJS/css/index.css

@@ -7,6 +7,13 @@
   color: #2c3e50;
 }
 
+.hint {
+  font-size: 12px;
+  font-style: italic;
+  font-weight: 100;
+  color: #666;
+}
+
 .room {
   max-width: 640px;
   margin: 0 auto;

examples/pureJS/index.html

@@ -14,7 +14,7 @@
         <p>当前选中的流：<span id="selectedStream">未选择</span></p>
         <h3>本地（发布）流</h3>
         <div id="pushers"></div>
-        <h3>远端（订阅）流</h3>
+        <h3 id="pullers-title">远端（订阅）流</h3>
         <div id="pullers"></div>
         <h3>操作</h3>
         <button id="joinRoomBtn">加入房间</button>
@@ -30,6 +30,7 @@
         API 文档请看这里
       </a>
     </div>
+    <script type="text/javascript" src="js/can-autoplay.min.js"></script>
     <script type="text/javascript" src="https://ucloud.github.io/urtc-sdk-web/lib/index.js"></script>
     <script type="text/javascript" src="js/config.js"></script>
     <script type="text/javascript" src="js/index.js"></script>

examples/pureJS/js/index.js

@@ -19,9 +19,15 @@ window.onload = function () {
 
   console.log('UCloudRTC sdk version: ', UCloudRTC.version);
 
-  function isIOS() {
-    return /.*iphone.*/i.test(navigator.userAgent);
-  }
+  canAutoplay.video().then(res => {
+    if (!res.result) {
+      const pullerElm = document.querySelector('#pullers-title');
+      const hintElm = document.createElement('p');
+      hintElm.className = 'hint';
+      hintElm.textContent = '当前浏览器不支持自动播放视频，订阅远端流成功后，可点击对应的视频区域进行播放'
+      pullerElm.appendChild(hintElm);
+    }
+  });
 
   // 用于维护应用内的状态
   const App = {
@@ -124,9 +130,6 @@ window.onload = function () {
         videoElem.autoplay = true;
         videoElem.playsInline = true;
         videoElem['webkit-playsinline'] = 'true';
-        if (isIOS()) {
-          videoElem.controls = true;
-        }
         videoElem.srcObject = stream.mediaStream;
         player.append(videoElem);
       }
@@ -157,13 +160,15 @@ window.onload = function () {
         videoElem.autoplay = true;
         videoElem.playsInline = true;
         videoElem['webkit-playsinline'] = 'true';
-        if (isIOS()) {
-          videoElem.controls = true;
-        }
         videoElem.srcObject = stream.mediaStream;
         const pElem = player.querySelector('p');
         player.removeChild(pElem);
         player.appendChild(videoElem);
+        videoElem.addEventListener('click', function() {
+          if (videoElem.paused) {
+            videoElem.play();
+          }
+        });
       } else {
         const videoElem = player.querySelector('video');
         const pElem = document.createElement('p');