[vue demo] [react demo] - iOS 订阅流自动播放声音处理

examples/react/src/components/MediaPlayer/index.jsx

@@ -172,7 +172,7 @@ export default class MediaPlayer extends Component {
       return (
         <div className="muted-mask">
           <div className="mask-content">
-            <div className="hint">由于iOS系统限制，视频自动播放时需要静音，需要您点击下面的按钮来取消静音</div>
+            <div className="hint">由于iOS系统限制，视频自动播放时需要静音，请点击下面的按钮来取消静音</div>
             <button onClick={this.handleUnmute}>取消静音</button>
           </div>
         </div>

examples/vue/src/components/MediaPlayer.vue

@@ -12,7 +12,7 @@
         playsinline
         v-bind:muted="isIOS">
       </video>
-      <div class="muted-mask" v-show="isMuted">
+      <div class="muted-mask" v-show="showMuteMask">
         <div class="mask-content">
           <div class="hint">由于iOS系统限制，视频自动播放时需要静音，请点击下面的按钮来取消静音</div>
           <button @click.stop="handleUnmute">取消静音</button>
@@ -177,6 +177,14 @@ export default {
         this.isMuted = false;
       }
     }
+  },
+  computed: {
+    showMuteMask: function () {
+      if (this.stream && this.stream.type !== 'subscribe') {
+        return false;
+      }
+      return this.isMuted;
+    }
   }
 };
 </script>