Question

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

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

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

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

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

从我的角度来看，似乎我需要检测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();
});

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

1 个答案: