Как воспроизводить видео Vimeo в React Native? - PullRequest
Новая
       20

Как воспроизводить видео Vimeo в React Native?

0 голосов
/ 09 ноября 2018

У меня есть требование воспроизводить видео Vimeo в моем собственном приложении.Я использую веб-просмотр для воспроизведения видео, видео воспроизводится, но я ничего не вижу на экране, звук идет, но на экране ничего нет.Ниже мой код.Есть ли что-то, что я делаю неправильно или какой-то другой способ играть в Vimeo?Любая помощь будет оценена.

<AutoHeightWebView
    startInLoadingState
    style={{ width: "100%", height: '100%', borderColor: 'white', borderWidth: 2 }}
    source={{
        uri: 'https://player.vimeo.com/video/299264098?autoplay=1' //'this.state.videoUrl'
    }}
    onError={() => console.log('on error')}
    onLoad={() => console.log('on load')}
    onLoadStart={() => console.log('on load start')}
    onLoadEnd={() => console.log('on load end')}

    bounces={false}
/>

1 Ответ

0 голосов
/ 09 ноября 2018

Попробуйте react-native-video пакет для воспроизведения Vimeo видео в проекте React Native.

Для установки с npm

npm install --save react-native-video

или используя yarn: 

yarn add react-native-video

Стоит отметить проблемы, которые могут возникнуть в ссылках ниже.

https://stackoverflow.com/a/52976151/5519329

https://stackoverflow.com/a/39982973/5519329

Код: 

import Video from 'react-native-video';

<Video source={{uri: "your url"}}   // Can be a URL or a local file.
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onEnd={this.onEnd}                      // Callback when playback finishes
       onError={this.videoError}               // Callback when video cannot be loaded
       style={styles.backgroundVideo} />

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});
...