首页 发现 帮助
登录
githab
/
urtc-sdk-web
2
0
派生 0
文件 工单管理 0 合并请求 0 Wiki
浏览代码

[purejs demo] [react demo] [vue demo] [angular demo] - 支持 iOS 下的浏览器播放

kevin.song 6 年之前
父节点
5408bd23dc
当前提交
543fe203eb
共有 6 个文件被更改，包括 37 次插入 和 6 次删除
分列视图 显示文件统计
  1. 1 1
      examples/angular/src/components/stream-player/index.html
  2. 6 0
      examples/angular/src/components/stream-player/index.ts
  3. 1 0
      examples/pureJS/index.html
  4. 14 2
      examples/pureJS/js/index.js
  5. 7 1
      examples/react/src/components/MediaPlayer/index.jsx
  6. 8 2
      examples/vue/src/components/MediaPlayer.vue

+ 1 - 1
examples/angular/src/components/stream-player/index.html
查看文件 

@@ -8,7 +8,7 @@
 
     %
 
     &nbsp;&nbsp;&nbsp;&nbsp;网络延时: {{stats.rtt}} ms</div>
 
   <div [hidden]="!stream.mediaStream">
 
-    <video webkit-playsinline autoplay playsinline #video>
 
+    <video webkit-playsinline autoplay playsinline [controls]="isIOS" #video>
 
     </video>
 
   </div>
 
   <p [hidden]="stream.mediaStream">unsubscribe</p>

+ 6 - 0
examples/angular/src/components/stream-player/index.ts
查看文件 

@@ -25,6 +25,10 @@ interface Stats {
 
   biggestRTT: number;
 
 }
 
 
+function isIOS(): boolean {
 
+  return /.*iphone.*/i.test(navigator.userAgent);
 
+}
 
+
 
 @Component({
 
   selector: 'app-stream-player',
 
   templateUrl: './index.html',
 
@@ -49,6 +53,7 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
 
 
   private volumeTimer: number;
 
   private stateTimer: number;
 
+  private isIOS: boolean;
 
 
   @ViewChild('video', {static: true}) videoRef: ElementRef;
 
 
@@ -57,6 +62,7 @@ export class StreamPlayerComponent implements OnInit, OnDestroy, OnChanges, Afte
 
   constructor() {
 
     this.volumeTimer = 0;
 
     this.stateTimer = 0;
 
+    this.isIOS = isIOS();
 
   }
 
 
   ngOnInit() {

+ 1 - 0
examples/pureJS/index.html
查看文件 

@@ -3,6 +3,7 @@
 
   <head>
 
     <meta charset="utf-8">
 
     <title> URTC DEMO PureJS </title>
 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link type="text/css" rel="stylesheet" href="css/index.css"/>
 
     <link type="text/css" rel="stylesheet" href="css/mediaPlayer.css"/>
 
   </head>

+ 14 - 2
examples/pureJS/js/index.js
查看文件 

@@ -19,6 +19,10 @@ window.onload = function () {
 
 
   console.log('UCloudRTC sdk version: ', UCloudRTC.version);
 
 
+  function isIOS() {
 
+    return /.*iphone.*/i.test(navigator.userAgent);
 
+  }
 
+
 
   // 用于维护应用内的状态
 
   const App = {
 
     state: {
 
@@ -118,7 +122,11 @@ window.onload = function () {
 
       } else {
 
         const videoElem = document.createElement('video');
 
         videoElem.autoplay = true;
 
-        videoElem.playsinline = true;
 
+        videoElem.playsInline = true;
 
+        videoElem['webkit-playsinline'] = 'true';
 
+        if (isIOS()) {
 
+          videoElem.controls = true;
 
+        }
 
         videoElem.srcObject = stream.mediaStream;
 
         player.append(videoElem);
 
       }
 
@@ -147,7 +155,11 @@ window.onload = function () {
 
       if (stream.mediaStream) {
 
         const videoElem = document.createElement('video');
 
         videoElem.autoplay = true;
 
-        videoElem.playsinline = 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);

+ 7 - 1
examples/react/src/components/MediaPlayer/index.jsx
查看文件 

@@ -3,6 +3,10 @@ import PropTypes from 'prop-types';
 
 import classnames from 'unique-classnames';
 
 import './index.css';
 
 
+function isIOS() {
 
+  return /.*iphone.*/i.test(navigator.userAgent);
 
+}
 
+
 
 export default class MediaPlayer extends Component {
 
   static propTypes = {
 
     className: PropTypes.string,
 
@@ -36,6 +40,7 @@ export default class MediaPlayer extends Component {
 
     this.volumeTimer = 0;
 
     this.stateTimer = 0;
 
     this.videoElem = React.createRef();
 
+    this.isIOS = isIOS();
 
   }
 
 
   componentDidMount() {
 
@@ -167,7 +172,8 @@ export default class MediaPlayer extends Component {
 
             ref={this.videoElem}
 
             webkit-playsinline="true"
 
             autoPlay
 
-            playsInline>
 
+            playsInline
 
+            controls={this.isIOS}>
 
           </video>
 
         </div>
 
         <p style={{ display: hasMediaStream ? 'none' : 'block' }}> unsubscribe </p>

+ 8 - 2
examples/vue/src/components/MediaPlayer.vue
查看文件 

@@ -9,7 +9,8 @@
 
         ref="video"
 
         webkit-playsinline
 
         autoplay
 
-        playsinline>
 
+        playsinline
 
+        v-bind:controls="isIOS">
 
       </video>
 
     </div>
 
     <p v-show="!stream.mediaStream">unsubscribe</p>
 
@@ -23,6 +24,10 @@ export default {
 
   name: 'MediaPlayer',
 
   data: function () {
 
     const classes = classnames('media-player', this.className);
 
+    function isIOS () {
 
+      return /.*iphone.*/i.test(navigator.userAgent);
 
+    }
 
+
 
     return {
 
       classes: classes,
 
       volume: 0,
 
@@ -33,7 +38,8 @@ export default {
 
         biggestVideoLost: 0,
 
         rtt: 0,
 
         biggestRTT: 0
 
-      }
 
+      },
 
+      isIOS: isIOS()
 
     };
 
   },
 
   props: {