在react-native-video中播放youtube视频

Question

如何在react-native-video上播放youtube视频，

我不想在react-native-youtube或webview中播放视频，

Answer 1

我检查并使用的另一个选项是WebView。要使用它，请确保将组件放在带有flex的视图中。例如：

<View style={{flex: 1}}>
    <WebView
        style={ {  marginTop: (Platform.OS == 'ios') ? 20 : 0,} }
        javaScriptEnabled={true}
        domStorageEnabled={true}
        source={{uri: 'https://www.youtube.com/embed/'+this.state.pictureData.idVideo }}
    />
</View>

在我的例子中，我所做的是获取YouTube视频的标识部分，例如：https://www.youtube.com/watch?v=KQ6zr6kCPj8

this.state.pictureData.idVideo将仅包含: KQ6zr6kCPj8

要使用它，请安装：

1. $ npm安装--保存react-native-webview
2. 链接react-native-webview

如果你想了解更多信息：https://github.com/react-native-community/react-native-webview

Answer 2

react-native-video不支持YouTube播放。这是我们在自己的项目中一直在调查的事情。虽然由于直接暴露了HLS和MP4文件，YouTube将支持Vimeo pro视频的播放，但Vimeo并不可靠地提供这一功能。过去，有时可以从一些YouTube视频中获取直接视频地址，但现在might not even be possible with the latest API.不再可靠了

目前，为了避免不得不实现官方的react-native-youtube存储库，我们一直在向YouTube应用程序或YouTube站点倾倒，但我们最终将与该存储库集成，以便提供更无缝的用户体验。

我知道你不想使用这个解决方案，但是，不幸的是，使用react-native-video现在不是你解决这个问题的一个选择，可能永远也不会。有关更多信息，请参阅此SO question。

Answer 3

你的问题的一个解决方案是使用原生反应的youtube。

react-native-youtube

下面是我尝试过的一个例子：

import React, { Component } from 'react';
import  { StyleSheet,  View,  Text,  ScrollView,  TouchableOpacity,  PixelRatio,         Platform,  Button,  Dimensions, } from 'react-native';
import YouTube, { YouTubeStandaloneIOS, YouTubeStandaloneAndroid } from 'react-native-youtube';



export default class YouTubeExample extends Component {
state = {
  isReady: false,
  status: null,
  quality: null,
  error: null,
  isPlaying: true,
  isLooping: true,
  duration: 0,
  currentTime: 0,
  fullscreen: false,
  playerWidth: Dimensions.get('window').width,
 };
 constructor(props){
    super(props);
 }

 _youTubeRef = React.createRef();

render(){
  const YOUR_API_KEY = "paste yout api key here";

 return (<View>
      <ScrollView style={styles.container}>
        <Text style={styles.welcome}>{'<YouTube /> component for React Native.'}    </Text>
    <YouTube
      ref={this._youTubeRef}
      // You must have an API Key for the player to load in Android
      apiKey = {YOUR_API_KEY}
      // Un-comment one of videoId / videoIds / playlist.
      // You can also edit these props while Hot-Loading in development mode to see how
      // it affects the loaded native module
      //videoId="ncw4ISEU5ik"
      // videoIds={['uMK0prafzw0', 'qzYgSecGQww', 'XXlZfc1TrD0', 'czcjU1w-c6k']}
      playlistId="PL3c6c2pNE7cLc5a0zpz7xZOW38H7lzzKM"
      play={this.state.isPlaying}
      loop={this.state.isLooping}
      fullscreen={this.state.fullscreen}
      controls={1}
      style={[
        { height: PixelRatio.roundToNearestPixel(this.state.playerWidth / (16 / 9)) },
        styles.player,
      ]}
      onError={e => {
        this.setState({ error: e.error });
      }}
      onReady={e => {
        this.setState({ isReady: true });
      }}
      onChangeState={e => {
        this.setState({ status: e.state });
      }}
      onChangeQuality={e => {
        this.setState({ quality: e.quality });
      }}
      onChangeFullscreen={e => {
        this.setState({ fullscreen: e.isFullscreen });
      }}
      onProgress={e => {
        this.setState({ currentTime: e.currentTime });
      }}
    />

 {/* Playing / Looping */}
    <View style={styles.buttonGroup}>
      <Button
        title={this.state.status == 'playing' ? 'Pause' : 'Play'}
        color={this.state.status == 'playing' ? 'red' : undefined}
        onPress={() => {
          this.setState(state => ({ isPlaying: !state.isPlaying }));
        }}
      />
      <Text> </Text>
      <Button
        title={this.state.isLooping ? 'Looping' : 'Not Looping'}
        color={this.state.isLooping ? 'green' : undefined}
        onPress={() => {
          this.setState(state => ({ isLooping: !state.isLooping }));
        }}
      />
    </View>

    {/* Previous / Next video */}
    <View style={styles.buttonGroup}>
      <Button
        title="Previous Video"
        onPress={() => {
          if (this._youTubeRef.current) {
            this._youTubeRef.current.previousVideo();
          }
        }}
      />
      <Text> </Text>
      <Button
        title="Next Video"
        onPress={() => {
          if (this._youTubeRef.current) {
            this._youTubeRef.current.nextVideo();
          }
        }}
      />
    </View>

    {/* Go To Specific time in played video with seekTo() */}
    <View style={styles.buttonGroup}>
      <Button
        title="15 Seconds"
        onPress={() => {
          if (this._youTubeRef.current) {
            this._youTubeRef.current.seekTo(15);
          }
        }}
      />
      <Text> </Text>
      <Button
        title="2 Minutes"
        onPress={() => {
          if (this._youTubeRef.current) {
            this._youTubeRef.current.seekTo(2 * 60);
          }
        }}
      />
      <Text> </Text>
      <Button
        title="15 Minutes"
        onPress={() => {
          if (this._youTubeRef.current) {
            this._youTubeRef.current.seekTo(15 * 60);
          }
        }}
      />
    </View>

    {/* Play specific video in a videoIds array by index */}
    {this._youTubeRef.current &&
      this._youTubeRef.current.props.videoIds &&
      Array.isArray(this._youTubeRef.current.props.videoIds) && (
        <View style={styles.buttonGroup}>
          {this._youTubeRef.current.props.videoIds.map((videoId, i) => (
            <React.Fragment key={i}>
              <Button
                title={`Video ${i}`}
                onPress={() => {
                  if (this._youTubeRef.current) {
                    this._youTubeRef.current.playVideoAt(i);
                  }
                }}
              />
              <Text> </Text>
            </React.Fragment>
          ))}
        </View>
      )}

    {/* Get current played video's position index when playing videoIds (and playlist in iOS) */}
    <View style={styles.buttonGroup}>
      <Button
        title={'Get Videos Index: ' + this.state.videosIndex}
        onPress={() => {
          if (this._youTubeRef.current) {
            this._youTubeRef.current
              .getVideosIndex()
              .then(index => this.setState({ videosIndex: index }))
              .catch(errorMessage => this.setState({ error: errorMessage }));
          }
        }}
      />
    </View>

    {/* Fullscreen */}
    {!this.state.fullscreen && (
      <View style={styles.buttonGroup}>
        <Button
          title="Set Fullscreen"
          onPress={() => {
            this.setState({ fullscreen: true });
          }}
        />
      </View>
    )}

    {/* Get Duration (iOS) */}
    {Platform.OS === 'ios' && (
      <View style={styles.buttonGroup}>
        <Button
          title="Get Duration (iOS)"
          onPress={() => {
            if (this._youTubeRef.current) {
              this._youTubeRef.current
                .getDuration()
                .then(duration => this.setState({ duration }))
                .catch(errorMessage => this.setState({ error: errorMessage }));
            }
          }}
        />
      </View>
    )}

    {/* Get Progress & Duration (Android) */}
    {Platform.OS === 'android' && (
      <View style={styles.buttonGroup}>
        <Button
          title="Get Progress & Duration (Android)"
          onPress={() => {
            if (this._youTubeRef.current) {
              this._youTubeRef.current
                .getCurrentTime()
                .then(currentTime => this.setState({ currentTime }))
                .catch(errorMessage => this.setState({ error: errorMessage }));

              this._youTubeRef.current
                .getDuration()
                .then(duration => this.setState({ duration }))
                .catch(errorMessage => this.setState({ error: errorMessage }));
            }
          }}
        />
      </View>
    )}

    {/* Standalone Player (iOS) */}
    {Platform.OS === 'ios' && YouTubeStandaloneIOS && (
      <View style={styles.buttonGroup}>
        <Button
          title="Launch Standalone Player"
          onPress={() => {
            YouTubeStandaloneIOS.playVideo('KVZ-P-ZI6W4')
              .then(() => console.log('iOS Standalone Player Finished'))
              .catch(errorMessage => this.setState({ error: errorMessage }));
          }}
        />
      </View>
    )}

    {/* Standalone Player (Android) */}
    {Platform.OS === 'android' && YouTubeStandaloneAndroid && (
      <View style={styles.buttonGroup}>
        <Button
          style={styles.button}
          title="Standalone: One Video"
          onPress={() => {
            YouTubeStandaloneAndroid.playVideo({
              apiKey: 'YOUR_API_KEY',
              videoId: 'KVZ-P-ZI6W4',
              autoplay: true,
              lightboxMode: false,
              startTime: 124.5,
            })
              .then(() => {
                console.log('Android Standalone Player Finished');
              })
              .catch(errorMessage => {
                this.setState({ error: errorMessage });
              });
          }}
        />
        <Text> </Text>
        <Button
          title="Videos"
          onPress={() => {
            YouTubeStandaloneAndroid.playVideos({
              apiKey: 'YOUR_API_KEY',
              videoIds: ['HcXNPI-IPPM', 'XXlZfc1TrD0', 'czcjU1w-c6k', 'uMK0prafzw0'],
              autoplay: false,
              lightboxMode: true,
              startIndex: 1,
              startTime: 99.5,
            })
              .then(() => {
                console.log('Android Standalone Player Finished');
              })
              .catch(errorMessage => {
                this.setState({ error: errorMessage });
              });
          }}
        />
        <Text> </Text>
        <Button
          title="Playlist"
          onPress={() => {
            YouTubeStandaloneAndroid.playPlaylist({
              apiKey: 'YOUR_API_KEY',
              playlistId: 'PLF797E961509B4EB5',
              autoplay: false,
              lightboxMode: false,
              startIndex: 2,
              startTime: 100.5,
            })
              .then(() => {
                console.log('Android Standalone Player Finished');
              })
              .catch(errorMessage => {
                this.setState({ error: errorMessage });
              });
          }}
        />
      </View>
    )}

    {/* Reload iFrame for updated props (Only needed for iOS) */}
    {Platform.OS === 'ios' && (
      <View style={styles.buttonGroup}>
        <Button
          title="Reload iFrame (iOS)"
          onPress={() => {
            if (this._youTubeRef.current) {
              this._youTubeRef.current.reloadIframe();
            }
          }}
        />
      </View>
    )}

    <Text style={styles.instructions}>
      {this.state.isReady ? 'Player is ready' : 'Player setting up...'}
    </Text>
    <Text style={styles.instructions}>Status: {this.state.status}</Text>
    <Text style={styles.instructions}>Quality: {this.state.quality}</Text>

    {/* Show Progress */}
    <Text style={styles.instructions}>
      Progress: {Math.trunc(this.state.currentTime)}s ({Math.trunc(this.state.duration / 60)}:
      {Math.trunc(this.state.duration % 60)}s)
      {Platform.OS !== 'ios' && <Text> (Click Update Progress & Duration)</Text>}
    </Text>

    <Text style={styles.instructions}>
      {this.state.error ? 'Error: ' + this.state.error : ''}
    </Text>

      </ScrollView>
    </View>
   );
 }
}

const styles = StyleSheet.create({
  container: {
   backgroundColor: 'grey',
 },
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
},
buttonGroup: {
flexDirection: 'row',
alignSelf: 'center',
paddingBottom: 5,
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
 },
player: {
  alignSelf: 'stretch',
  marginVertical: 10,
 },
});

对于API密钥，请访问以下链接：

API Key

在地址中有播放列表的id：

​

​

按如下方式安装组件：

• npm安装react-native-youtube -S

我使用'@Nullable‘时遇到错误，如果您也有同样的问题，请转到

• node_modules\react-native-youtube\android\build.gradle

在“依赖项”部分中，添加以下行：

• implementation 'androidx.annotation:annotation:1.1.0'

也许你需要清理一下gradle：

• cd android
• gradlew clean (或

clean)

这是我实际的android模拟器的快照：

​

​