Question

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

这显然是其他人正在经历的未解决的问题。见以下帖子：

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

1）是否可以在移动浏览器中使用它？ Google的文档表明它应该

供参考 - 这是我的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移动应用中启动的最佳方式是什么

谢谢，亚历

Answer 1

由于缺乏其他回复，如果有其他人发现这一点，我在过渡期间采用了这种（不幸的）稍微有点狡猾的解决方案，似乎有效。

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

Answer 2

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

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

这意味着我们可以使用User Agent嗅探，这绝对不是最理想的，但比按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

Answer 3

这很简单，请参阅360视频上的youtube上的inspect元素（chrome）。你会发现这不是视频播放器。它是一个带webgl的画布。

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

看看：

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

您必须使用流式纹理制作webgl全景应用，并且yuo将获得360视频。 您必须使用球体而不是全景的立方体变体。

您无法使用视频标签 - 100％。

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

Answer 4

通过更改用户代理以匹配我的MacBook，我能够在Android WebView中使用360 vids。这是我使用的那个：

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以获得相同的结果。

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

4 个答案:

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

4 个答案:

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