Iphone 上的 YouTube Iframe API 没有全屏

Question

我有一个网络应用程序，它使用 YouTube Iframe API 将歌词和和弦与 YouTube 歌曲同步。嵌入式视频在没有全屏的情况下在线播放对我们来说至关重要。否则用户在页面上看不到歌词和和弦，应用程序将毫无意义。

这里是 demo.

我们 50% 的流量来自 iphones，但是 iphones 始终全屏播放 YouTube 视频。

这是嵌入视频的代码

var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: $("#ytid").attr("value"),
    playerVars: {'theme':'light','color':'white','modestbranding':1,'rel':0},
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });

在网络上寻找解决方案，我们尝试了一些修复，但 none 对 iphone 有效。如果我们认为可行，我们也准备开发 Swift 应用程序。然而网络搜索也给出了相反的建议。

是否有可靠的解决方法来内联播放 YouTube Iframe API 视频？
我们可以通过开发本机 IOS 应用程序来解决我们的问题吗？

Answer 1

一般来说：不，iPhone 上的 Safari 将始终全屏播放视频

iPad支持内联视频播放。

如果您有自己的 iOS 应用程序，显然您可以更好地控制视频播放。查看您的网站，拥有一个应用程序肯定可以让您更好地控制自动滚动等，因为它确实打开了整个世界的能力（和复杂性！）。

Answer 2

将参数 'playsinline':'1' 添加到 playerVars 对我有用。我不知道这是否也适用于网络，我正在使用 React Native 应用程序中的 WebView。

var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
    height: '390',
    width: '640',
    videoId: $("#ytid").attr("value"),
    playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }
});

Iphone 上的 YouTube Iframe API 没有全屏

YouTube Iframe API on Iphone without fullscreen

javascript

iphone

ios

youtube-iframe-api