React-native-видео не показывает видеоплеер - PullRequest
Новая
       19

React-native-видео не показывает видеоплеер

0 голосов
/ 26 сентября 2018

Я использую пакет response-native-video для получения видеоплеера, в котором я могу воспроизводить видео на YouTube.

Я пробовал это сделать, но вместо видеоплеера появилось только пустое место. 

import Video from 'react-native-video';
    <Video source={{uri: 'https://www.youtube.com/watch?v=Gh2FaDqZp2g'}}
                       ref={(ref) => {
                         this.player = ref
                       }}
                     onBuffer={this.onBuffer}
                     onEnd={this.onEnd}
                     onError={this.videoError}
                     style={styles.backgroundVideo} />

стиль: 

backgroundVideo: {
    height:300,
    width:'100%',
  }

Ответы [ 2 ]

0 голосов
/ 25 октября 2018

Я вижу некоторые проблемы в вашем коде:

1 / uri: пожалуйста, замените эту ссылку: "http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"

source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}

2 / Ваш стиль: насколько я помню width: '100% не работает, вы должны установить его на определенное число. Или вы можете сделать просмотр видео контейнера обёртыванием просмотра видео 

<View style={styles.videoContainer}>
    <Video
        source={{uri: 'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4'}}
        ref={(ref) => {
            this._player = ref
        }}                                      
        ...
        style={styles.video}/>
</View>

Стиль просмотра: 

videoContainer: {
    flex: 1,
    backgroundColor: 'black',
},
video: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
},

Надеюсь, что это можетпомочь вам.

0 голосов
/ 26 сентября 2018

Я думаю, Видео тег будет принимать Uri, заканчивающийся в формате .mp4 ..

Пожалуйста, замените ваш URI на этот http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4

( Примечание: Некоторые другие URI также могут быть использованы с тем же форматом) и оформить заказ.

Но для потоковой передачи видео с YouTube вам придется использовать act-native-youtube и Компонент API Youtube .

Пожалуйста, ознакомьтесь с этимссылка для дальнейшего

...