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

Question

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}

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". Please let it know if this works. — H. Pauwelyn, Apr 25 '17 at 11:47
Good idea, but when I tried it I still got http://localhost:8081/static_assets/https://www.youtube.com/embed/hkgYIr_LWPw 404 (Not Found) — Yoni Binstock, Apr 26 '17 at 17:12

H. Pauwelyn · Answer 1 · 2017-04-28T15:01:25.180

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.}

edited Apr 28 '17 at 15:01

answered Apr 28 '17 at 09:51

H. Pauwelyn

13,575
26
81
144

Good idea, but if I put a URL string, I get the following error "Invalid prop `source` of type `string` supplied to `VideoPano`, expected `object`." – Yoni Binstock Apr 28 '17 at 14:48
That's because the source is made of HTML, JS and CSS. I think there is one only option left and that is download the video and use that inside your application. You could use a [YouTube downloader](http://download.cnet.com/YTD/3000-2071_4-76169892.html) for that – H. Pauwelyn Apr 28 '17 at 14:58
It doesn't look like those type of downloaders are able to download 360 videos. – Yoni Binstock Apr 29 '17 at 11:08
Try this url: https://www.youtube.com/watch?v=hkgYIr_LWPw. This url not not a video from a playlist – H. Pauwelyn Apr 29 '17 at 11:12

score 0 · Answer 2 · answered Jul 05 '17 at 20:22

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

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

2 Answers2

Solution 1 (didn't work)

Solution 2

Linked