YouTube 360 视频 iframe 在移动浏览器中不起作用

YouTube 360 video iframe does not work in mobile browser

本文关键字：浏览器 不起作用 移动 视频 iframe YouTube      更新时间：2023-09-26

我正在尝试为YouTube 360视频获取嵌入式iframe以在我的移动网站上播放 - 它在桌面浏览器上运行良好，但在移动浏览器中，我只能播放平面立体视图。我可以确认它绝对是HTML5播放器

这显然是其他人正在经历的一个未解决的问题。请参阅以下帖子：

  • https://productforums.google.com/forum/#!topic/youtube/7sk92Fs1juk
  • 让 Youtube 360 度视频在移动设备上工作

因此，我需要这两个潜在问题/解决方案中至少一个的帮助。

1）是否有可能在移动浏览器中使其工作？谷歌的文档建议它应该

供参考 - 这是我的 iframe 代码

<iframe width="1360" height="500" src="https://www.youtube.com/embed/0x16ngo8xfY?autoplay=1&loop=1&playlist=0x16ngo8xfY" frameborder="0" allowfullscreen></iframe>

2）假设不是，强制我的iframe在YouTube移动应用程序中启动的最佳方法是什么，其中360视频确实可以正常工作

谢谢亚历克斯

鉴于缺乏其他响应，万一其他人发现了这一点，我在此期间采用了这个（不幸的是）有点黑客的解决方案，这似乎有效。

if(window.innerWidth < 760){
     $('.video').on('click', function( e ) {
       e.preventDefault();
       //assumes that by forcing window to go to youtube will kick up option to open in app where experience works - plays my full showreel
       window.location = "https://www.youtube.com/watch?v=0x16ngo8xfY&list=PLzSXIFcDqpiCiKXMtXtVIHnmor9uUsEhC&autoplay=1";
     });
  }
<</div> div class="answers">

根据YouTube的说法，360视频将在"计算机上最新版本的Chrome，Opera，Firefox或Internet Explorer"上运行：

https://support.google.com/youtube/answer/6178631

这意味着我们可以使用用户代理嗅探，这绝对是次优的，但比 AlexHandy1 建议的检查innerWidth略好。

function browserSupports360 () {
  // YouTube supports 360 videos in a limited set of browsers,
  // see https://support.google.com/youtube/answer/6178631
  var ua = navigator.userAgent;
  // No mobile browser is supported at the moment
  if (/Mobile/.test(ua) || /Tablet/.test(ua)) return false;
  // Chrome >= 40
  if (/Chrome'/[^123][0-9]/.test(ua) && !/Edge'//.test(ua) && !/OPR'//.test(ua)) return true;
  // Firefox >= 40
  if (/Firefox'/[^123][0-9]/.test(ua)) return true;
  // Microsoft Edge
  if (/Edge'//.test(ua)) return true;
  // Opera >= 30
  if (/OPR'/[^12][0-9]/.test(ua)) return true;
  return false;
}
YouTube

帮助论坛上有一个悬而未决的问题，询问是否可以改用功能检测，您可以对它投赞成票，希望YouTube上的某个人会查看它：

https://productforums.google.com/forum/#!topic/youtube/EON00C4h9w4

这是一个

简单的， 请参阅在 youtube 上的 360 度视频中检查元素（镶边）。你会看到这不是 视频播放器 .这是一个带有webgl的画布。

当谷歌想在移动设备上工作时，你可以玩它。在此之前，您必须制作自己的360视频播放器。对不起我的坏恩！

看：

http://threejs.org/examples/#canvas_geometry_panorama

您必须制作具有流纹理的webgl全景应用程序，您将获得360视频。 您必须使用全景的球体而不是立方体变体。

您不能使用视频标签 - 100% .

修复火狐

桌面：到达关于：配置在火狐的地址栏上，并将webgl禁用设置为假....即使您在Firefox上安装最新版本的更新，仍然必须这样做。如果您卸载 - 安装火狐新版本，默认情况下启用 webgl。

我能够通过更改用户代理以匹配我的MacBook，在Android WebView中获得360度视频。这是我使用的一个：

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.86 Safari/537.36

完整的实现包括VideoJS和使用iframe的YouTube扩展。触摸/拖动还不完美，但这是朝着正确方向迈出的一步。

也许您可以覆盖JS导航器的用户代理以达到相同的结果。

相关文章：