Is it possible to link to a 360 YouTube video with ReactVR?

问题

In the documentation for ReactVR for VideoPano

it demonstrates pointing to a video in the code base.

Is it possible to link to an external link (aka Youtube)?

So instead of video.mp4, it would link to 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';
  }
}

the rest of the code looks like this.

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}

回答1:

Solution 1 (didn't work)

You could try to use an embed the video: https://www.youtube.com/embed/hkgYIr_LWPw. This will give you just the video without other content.

If you need a embedded video, just left click on the video and choose "embed this video" and change the source of your

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

Not sure if this could wok because the source code is again HTML, JS and CSS. But you could give it a try. And it didn't work

Solution 2

Download the video using a YouTube downloader¹ or other one and use that.

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

^{¹ No publicity for that tool, just the first result I've found on Google.}

回答2:

YouTube intentionally chooses to obfuscate the direct links to their video files. Linking the embedded player isn't a solution since that thing's a mini web app with streaming logic, not an actual video file.

There's a pretty good write-up on how you could get around that here How do all of these “Save video from YouTube” services work? (probably against their Terms and Conditions though).

It is possible, however, to link to an external video URL, here's how:

Pick a random 3D 360 YouTube video, like this one
Download it, I used savefrom.net but there are many others and host it somewhere http://YOURDOMAIN/YOURVIDEO.mp4

Render a <VideoPano /> in your scene/view

<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

来源：https://stackoverflow.com/questions/43576301/is-it-possible-to-link-to-a-360-youtube-video-with-reactvr

标签

youtube

webvr

360-virtual-reality

react-360