2

在 ReactVR for VideoPano的文档中

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

是否可以链接到外部链接（又名 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}
4

2 回答 2

1

解决方案1 （无效）

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

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

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

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

解决方案 2

使用YouTube 下载器1或其他下载器下载视频并使用它。

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

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

于 2017-04-28T09:51:41.487 回答
0

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

这里有一篇关于如何解决这个问题的很好的文章。所有这些“从 YouTube 保存视频”服务是如何工作的？（可能违反他们的条款和条件）。

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

  1. 选择一个随机的 3D 360 YouTube 视频，比如这个
  2. 下载它，我使用savefrom.net但还有很多其他的并将其托管在某个地方http://YOURDOMAIN/YOURVIDEO.mp4

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

    <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

于 2017-07-05T20:22:18.453 回答