YouTube 360 视频 iframe 无法在移动浏览器中使用答案

【问题标题】：YouTube 360 video iframe does not work in mobile browserYouTube 360 视频 iframe 无法在移动浏览器中使用
【发布时间】：2016-05-21 01:05:56
【问题描述】：

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

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

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

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 在 360 度视频正常工作的 YouTube 移动应用中启动的最佳方法是什么

谢谢，亚历克斯

【问题讨论】：

还有这个stackoverflow.com/questions/28070741/…
YouTube parameter to call split view for 360 degree video的可能重复

标签： javascript html iframe youtube

【解决方案1】：

通过更改用户代理以匹配我的 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 导航器的 userAgent 来达到同样的效果。

【讨论】：

【解决方案2】：

这很简单，请参阅 youtube 上的 360 度视频中的检查元素 (chrome)。你会看到这不是视频播放器。它是一个带有 webgl 的画布。

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

看看：

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

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

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

修复 firefox 桌面：在 firefox 的地址栏上设置 about:config 并将 webgl-disabled 设置为 false ...。即使您在 firefox 上安装更新到最新版本，仍然必须这样做。如果你卸载 - 安装 firefox 新版本我的东西 webgl 默认启用。

【讨论】：

【解决方案3】：

根据 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

【讨论】：

【解决方案4】：

鉴于缺乏其他回应，以防其他人发现这一点，我在此期间采用了这个（不幸的是）略显老套的解决方案，这似乎可行。

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";
     });
  }

【讨论】：