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

Question

在VideoPano

的ReactVR文档中

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

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

因此，它将链接到https://www.youtube.com/watch?v=hkgYIr_LWPw&index=1&list=PL-BE7kqSgbEj44peyt5BmLK63kbDp7Rhu

，而不是video.mp4

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}

Answer 1

解决方案1 ​​（没有工作）

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

如果您需要嵌入式视频，只需左键单击视频，然后选择＆＃34;嵌入此视频＆＃34;并改变

的来源

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

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

解决方案2

使用YouTube downloader ¹ 或其他视频下载视频并使用该视频。

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

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

Answer 2

YouTube故意选择模糊其视频文件的直接链接。链接嵌入式播放器并不是一个解决方案，因为那个东西是一个带有流逻辑的迷你网络应用，而不是一个真正的视频文件。

关于你如何绕过这里How do all of these “Save video from YouTube” services work?（可能违反他们的条款和条件），这是一篇非常好的文章。

但是，可以链接到外部视频网址，具体如下：

1. 选择随机3D 360 YouTube视频，like this one
2. 下载它，我使用了savefrom.net，但还有很多其他人并将其托管在http://YOURDOMAIN/YOURVIDEO.mp4

3. 在场景/视图中渲染<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