javascript - 在浏览器中全屏播放 Youtube 视频

Question

我的问题:iOS 是唯一一个默认全屏播放嵌入式 Youtube 视频的操作系统吗？如果是这样，是否可以在非 iOs 设备中全屏(或关闭)安全地显示 youtube 视频？

情况是我有一组网页，每个网页上都包含一个 youtube 视频。这个想法是将用户保留在网页组中(直到他们“退出”组)，因此我没有显示任何相关视频，页面上唯一的其他链接是指向其他页面的链接组(和“退出”按钮)。

问题是我无法提供一致的跨设备体验。据我所知，全屏播放 Youtube 视频的唯一方法是打开 Youtube 应用程序。我不想这样做，因为我不想破坏我的准应用程序的体验。

我找到了this thread ，这似乎很有希望，但链接到 watch_popup url 会触发 Droid 设备上的 Youtube 应用程序。

我可以使用 Youtube API 嵌入视频，然后在用户想要播放视频时以模式显示该视频。但是这样做会扰乱 iOS 设备上的体验，因为默认情况下视频已经全屏播放。

从我的 Angular 来看，似乎我需要检测 userAgent，如果 userAgent 不是 iOS，则在模态窗口中显示视频。检测 userAgent 似乎是 2001 年，那么有更好的方法吗？

Answer 1

我们在 IOS 上遇到了类似的情况，只是我们希望它是全屏体验，而我们只希望它是一键式游戏。

默认情况下，如果您在 IOS 中有内嵌视频，则需要单击该视频，然后它会全屏打开，然后您需要再次单击它才能播放。步骤太多。

为了使体验保持一致，我做了以下操作。

为视频使用占位符图像，但通过 youtube api 在不透明度设置为 0 的占位符图像上加载视频。

设置它，以便单击事件调整大小、重新定位并将不透明度调整为 1，以实现全屏模式和自动播放。

var done = false;
function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
  $('.mobile-video-container').css('opacity', 1);
  $('.page-container').addClass('modal-background');
 }
}

function stopVideo() {
 player.stopVideo();
}
$('.page-container').click(function(){
  $('.mobile-video-container').css('opacity', 0);
  $('.page-container').removeClass('modal-background');
  player.stopVideo();
});