Можно ли сделать ссылку на 360-градусное видео YouTube с помощью ReactVR?

В документации ReactVR для VideoPano

он демонстрирует указание на видео в кодовой базе.

Можно ли сделать ссылку на внешнюю ссылку (она же Youtube)?

Таким образом, вместо видео.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 react-360 webvr 360-virtual-reality
person Yoni Binstock    schedule 23.04.2017    source источник
comment
Вы можете попробовать встроить видео: youtube.com/embed/hkgYIr_LWPw. Это даст вам только видео без другого контента. Если вам нужно встроенное видео, просто щелкните левой кнопкой мыши на видео и выберите встроить это видео. Пожалуйста, дайте знать, если это сработает.   -  person H. Pauwelyn    schedule 25.04.2017
comment
Хорошая идея, но когда я попробовал, я все равно получил http://localhost:8081/static_assets/https://www.youtube.com/embed/hkgYIr_LWPw 404 (не найдено)   -  person Yoni Binstock    schedule 26.04.2017
comment
Вы спрашивали здесь: github.com/facebook/react-vr   -  person H. Pauwelyn    schedule 07.05.2017

Ответы (2)


arrow_upward
1
arrow_downward

Решение 1 (не сработало)

Вы можете попробовать встроить видео: https://www.youtube.com/embed/hkgYIr_LWPw< /а>. Это даст вам только видео без другого контента.

Если вам нужно встроенное видео, просто щелкните левой кнопкой мыши на видео и выберите «встроить это видео» и измените источник вашего

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

Не уверен, что это сработает, потому что исходный код снова HTML, JS и CSS. Но вы могли бы попробовать. И это не сработало

Решение 2

Загрузите видео с помощью загрузчика YouTube1 или другой и используйте его.

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

1 Никакой рекламы этого инструмента, просто первый результат, который я нашел в Google.

person H. Pauwelyn    schedule 28.04.2017
comment
Хорошая идея, но если я помещу строку URL, я получу следующую ошибку: Недопустимая опора source типа string, предоставленная VideoPano, ожидаемая object. - person Yoni Binstock; 28.04.2017
comment
Это потому, что исходный код состоит из HTML, JS и CSS. Я думаю, что остался только один вариант: загрузить видео и использовать его в своем приложении. Для этого можно использовать загрузчик YouTube. - person H. Pauwelyn; 28.04.2017
comment
Не похоже, чтобы такие загрузчики могли загружать 360-градусные видео. - person Yoni Binstock; 29.04.2017
comment
Попробуйте использовать этот URL: youtube.com/watch?v=hkgYIr_LWPw. Этот URL не является видео из плейлиста - person H. Pauwelyn; 29.04.2017

arrow_upward
0
arrow_downward

YouTube намеренно скрывает прямые ссылки на свои видеофайлы. Связывание встроенного проигрывателя не является решением, поскольку это мини-веб-приложение с логикой потоковой передачи, а не реальный видеофайл.

Здесь есть довольно хорошая статья о том, как это обойти Как работают все эти сервисы «Сохранить видео с YouTube»? (хотя, возможно, это противоречит их Условиям использования).

Однако можно сделать ссылку на внешний URL-адрес видео, вот как это сделать:

  1. Выберите случайное 3D-видео YouTube 360, как это
  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

person Valentin    schedule 05.07.2017