IonicFramework - 在iOS上以全屏模式停止视频自动播放

时间:2018-05-03 02:30:02

标签: ionic-framework ionic2 ionic3

简而言之,我已经使用iframe在我的应用中嵌入了YouTube视频,并在用户输入该特定页面后播放器准备就绪时将其设置为自动播放。

-Problem我正面临:视频播放器的行为与我在Android设备上的预期相同。用户进入页面,视频自动播放而不按“播放”按钮,当他/她想要全屏时,只需点击“全屏”。当用户想要暂停视频时,同样可以使用。

然而,在iOS上:用户进入页面 - >视频以全屏模式自动播放,这绝对不是我想要的 - >当用户退出全屏时视频暂停,如果他/她点击“播放”,则视频再次全屏显示。基本上,它只能在全屏播放。

- 问题是:有没有什么方法可以实现视频播放器与Android for iOS相同的行为?非常感谢,任何帮助都会非常感激。

- 这是html:

<iframe id="iframeTube" width="100%" height="250" src="https://www.youtube.com/embed/b5cv7ihxBeY?enablejsapi=1&fs=1" frameborder="0"
                style="border: solid 4px #37474F" allowfullscreen></iframe>

- 这是在.ts文件中处理的视频:

ionViewWillEnter() {
    this.onYouTubeIframeAPIReady();
  }
  ionViewDidEnter() {   
    this.fullscreenProcess(this);        
  }

  onYouTubeIframeAPIReady() {
    this.player = new YT.Player('iframeTube', {
      events: {
        'onReady': this.onPlayerReady,
        'onStateChange': this.onPlayerStateChange
      }
    });
  }
  onPlayerReady(event) {
    console.log('ready')
    var embedCode = event.target.getVideoEmbedCode();
    event.target.playVideo();   
    var self = this;
  }
  fullscreenProcess(self)
  {
      document.addEventListener("webkitfullscreenchange", function (event) {

      if (document.webkitIsFullScreen) {
        console.log("full")
        self.screenOrientation.lock(self.screenOrientation.ORIENTATIONS.LANDSCAPE);
      }
      else {
        self.screenOrientation.unlock();
        console.log("not full")
      }
    });

  }

0 个答案:

没有答案
相关问题