是否可以使用 ReactVR 链接到 360 YouTube 视频？答案

【问题标题】：Is it possible to link to a 360 YouTube video with ReactVR?是否可以使用 ReactVR 链接到 360 YouTube 视频？
【发布时间】：2017-04-23 20:43:47
【问题描述】：

在 VideoPano 的 ReactVR 文档中

它演示了指向代码库中的视频。

是否可以链接到外部链接（又名 Youtube）？

所以不是video.mp4，而是链接到https://www.youtube.com/watch?v=hkgYIr_LWPw&index=1&list=PL-BE7kqSgbEj44peyt5BmLK63kbDp7Rhu

let videoUrl = 'video.webm';
const supportedFormats = NativeModules.VideoModule.supportedFormats;
for (let i = 0; i < supportedFormats.length; i++) {
  if (supportedFormats[i] === 'mp4') {
    videoUrl = 'video.mp4';
  }
}

其余代码如下所示。

class WelcomeToVR extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      playerState: new MediaPlayerState({autoPlay: true, muted: true}), // init with muted, autoPlay
    };
  }
  render() {
    return (
           <View>
           <VideoPano
    playerState={this.state.playerState}
  source={asset(videoUrl, {layout: 'SPHERE'})}
         />
         <VideoControl
  style={{
  height: 0.2,
          width: 4,
                 layoutOrigin: [0.5, 0.5, 0],
  transform: [{translate: [0, 0, -4]}],
}}
playerState={this.state.playerState}

【问题讨论】：

您可以尝试使用嵌入视频：youtube.com/embed/hkgYIr_LWPw。这将为您提供没有其他内容的视频。如果您需要嵌入视频，只需左键单击视频并选择“嵌入此视频”。请告诉它是否可行。
好主意，但是当我尝试它时，我仍然得到localhost:8081/static_assets/https://www.youtube.com/embed/… 404（未找到）
你在这里问过吗：github.com/facebook/react-vr

标签： youtube webvr 360-virtual-reality react-360

【解决方案1】：

解决方案 1 （不起作用）

您可以尝试使用嵌入视频：https://www.youtube.com/embed/hkgYIr_LWPw。这将只为您提供没有其他内容的视频。

如果您需要嵌入视频，只需左键单击视频并选择“嵌入此视频”并更改您的来源

<VideoPano playerState={this.state.playerState} source={videoUrl} />

不确定这是否可行，因为源代码又是 HTML、JS 和 CSS。但你可以试一试。它没有工作

解决方案 2

使用YouTube downloader¹ 或其他方式下载视频并使用它。

<VideoPano playerState={this.state.playerState} 
            source={ asset(videoUrl, { layout: 'SPHERE' }) } />

^{¹ 没有宣传该工具，只是我在 Google 上找到的第一个结果。}

【讨论】：

好主意，但如果我输入一个 URL 字符串，我会收到以下错误“提供给 string 类型的无效属性 source VideoPano，应为 object。”
那是因为源码是由 HTML、JS 和 CSS 组成的。我认为只有一个选择，那就是下载视频并在您的应用程序中使用它。您可以为此使用YouTube downloader
看起来那些类型的下载器无法下载 360 视频。
试试这个网址：youtube.com/watch?v=hkgYIr_LWPw。此网址不是播放列表中的视频

【解决方案2】：

YouTube 故意选择混淆指向其视频文件的直接链接。链接嵌入式播放器不是一个解决方案，因为那是一个带有流逻辑的迷你 Web 应用程序，而不是一个实际的视频文件。

在How do all of these “Save video from YouTube” services work? 上有一篇很好的文章介绍了如何解决这个问题（尽管可能违反了他们的条款和条件）。

但是，可以链接到外部视频 URL，方法如下：

随机选择一个 3D 360 YouTube 视频，like this one
下载它，我用过savefrom.net，但还有很多其他的，把它托管在某个地方http://YOURDOMAIN/YOURVIDEO.mp4

在您的场景/视图中渲染<VideoPano />

<VideoPano source={{
  uri: 'http://YOURDOMAIN/YOURVIDEO.mp4',
  stereo: 'BOTTOM_TOP_3D' // this is specific to YouTube 3D videos
}} />

https://facebook.github.io/react-vr/docs/videopano.html

【讨论】：