简而言之,我已经使用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")
}
});
}