强制 iOS iPhone youtube 嵌入播放器退出全屏

Posted

技术标签:

【中文标题】强制 iOS iPhone youtube 嵌入播放器退出全屏【英文标题】:Force iOS iPhone youtube embed player out of fullscreen 【发布时间】:2016-03-19 13:33:42 【问题描述】:

我正在创建一个网站,用户可以在其中观看视频,并在此过程中回答问题。但是,我有一个问题。当用户在 iPhone 上观看 YouTube 嵌入视频时,它会在 ios 播放器中启动,而不是在 YouTube 播放器中启动。当我试图让播放器退出全屏时,它没有这样做,而是暂停视频并坐在那里。我正在使用此代码:

if (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
) 
    // exit full-screen
    if (document.exitFullscreen) 
        document.exitFullscreen();
     else if (document.webkitExitFullscreen) 
        document.webkitExitFullscreen();
     else if (document.mozCancelFullScreen) 
        document.mozCancelFullScreen();
     else if (document.msExitFullscreen) 
        document.msExitFullscreen();
    

这适用于除 iOS iPhone 播放器之外的所有设备。我也尝试过隐藏播放器,但这也不起作用。有没有办法让播放器退出全屏,或者某种解决方法?谢谢!

注意:我使用的是 Youtube iframe API。 https://developers.google.com/youtube/iframe_api_reference?hl=en

【问题讨论】:

您是否有权访问视频元素,或者您正在使用 iframe? 我正在使用一个 知道了。对不起,伙计,我想你可能被卡住了。 iOS (caniuse.com/#feat=fullscreen) 不支持全屏,因此您尝试退出的不是全屏。我很好奇为什么这可以在 iPad 上工作,当它处于全屏模式时,它对视频也一样。 我猜这可能是因为在 iPad 上,浏览器被告知要进入全屏模式,所以它可以在启动原生播放器之前设置一个标志“某事是全屏”。而在 iPhone 上,开始播放会跳过浏览器中的“启用全屏”步骤.. 【参考方案1】:

我使用以下代码作为解决方法:

当你想退出 iPhone 播放器时:

player.seekTo(2000, true);

这将使播放器转到视频的结尾并关闭全屏播放器。

【讨论】:

在 iOS 中退出全屏的最佳解决方法。谢谢!【参考方案2】:

在苹果自己的视频播放器中播放 Iphone 视频。该播放器不像 YouTube 播放器那样是 html5 元素。 因此,iPhone 上的全屏中没有元素。

在 Ipad 上不是这种情况,YouTube 自己的播放器会启动,启用全屏模式。

简而言之:我很确定你不能这样做。 (很高兴被证明是错误的)

【讨论】:

你有关于这个“苹果自己的视频播放器”的文档吗?它可以处理所有 html5 视频嵌入吗?【参考方案3】:

这是不可能的。要么将其切换到 YouTube 应用,要么在应用内使用 iOS 默认播放器。

【讨论】:

【参考方案4】:

如果您仍在使用移动浏览器,您可以尝试以下操作:

在 youtube api 中,有一个

YouTube.PlayerState.ENDED

事件。当用户点击退出全屏模式时触发此事件。 只需在您当前的 html 页面中添加编码以强制浏览器关闭播放器以关闭全屏,它就会重新显示原始播放器。

有一个问题,在 Playerstate.ENDED 事件之后视频将不会继续播放。 但是您可以随时重新定位视频停止的时间并重新播放。

function takePlayerOutFullscreen(event) 

     if (event.data == YT.PlayerState.ENDED) 
         alert("video ended");

     
     else if (event.data == YT.PlayerState.PAUSED) 
          alert("video paused");
     
 

(注意:如果您的移动浏览器在播放视频时直接将您带到本机 youtube 应用程序,那么您无法切换/关闭本机 youtube 应用程序并返回到网络浏览器。为了防止移动浏览器直接带你到本机应用程序。你可以去你的手机设置并更改默认启动应用程序。)

希望对您有所帮助。

【讨论】:

这就是问题所在。您不能强制播放器退出全屏或关闭它。你有解决方案吗?谢谢! 用户没有点击任何按钮。这就是我想说的。相反,我需要将播放器拉出全屏。你是说我需要寻找到视频的结尾?我该怎么办?谢谢!

以上是关于强制 iOS iPhone youtube 嵌入播放器退出全屏的主要内容,如果未能解决你的问题,请参考以下文章

IOS6 横向在仅纵向 iPhone 应用程序中从 uiwebview 播放嵌入的 youtube 视频

ionic 嵌入式 youtube 视频停止在 iOS 上播放

Phonegap / Cordova Youtube 在 iOS 上嵌入视频不起作用

强制嵌入 Youtube 以高清播放(2016 版)

Youtube iframe 嵌入:强制 Flash?

强制 youtube 嵌入以 720p 开始