react-native - 在 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 install --save react-native-webview
2. 链接 react-native-webview

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

Answer 2

react-native-video 不支持 YouTube 播放。这是我们在自己的项目中一直在研究的问题。由于直接暴露 HLS 和 MP4 文件，它将支持 Vimeo pro 视频的播放，但 YouTube 不能可靠地提供这一点。过去有时可以从某些 YouTube 视频中获取直接视频 URL，但这不再可靠，甚至可能无法使用最新的 API。

目前，我们一直在向 YouTube 应用程序或 YouTube 网站倾销，以避免必须实施官方的react-native-youtube存储库，但我们最终将与该存储库集成以提供更无缝的用户体验。

我了解您不想使用此解决方案，但不幸的是，使用 react-native-video 现在不是您解决此问题的选择，而且很可能永远不会。有关更多信息，请参阅此SO 问题。

Answer 3

您的问题的解决方案是使用 react-native 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 密钥

您在地址中有播放列表的 ID：

像这样安装组件：

• npm install react-native-youtube -S

我有“@Nullable”的错误，如果你有同样的问题，去

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

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

• 实现 'androidx.annotation:annotation:1.1.0'

也许你需要清理 gradle：

• 光盘安卓
• gradlew clean (或 .\gradlew clean)

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

Answer 4

您无法使用react-native-video模块播放 Youtube 视频。目前不支持，也从未支持。而且它似乎不在他们的路线图中。所以你应该讨论其他选项，我推荐最新版本的react-native-webview。我自己测试过，效果很好。特别是我喜欢他们为安卓添加全屏模式的东西。

Answer 5

好吧，我还没有尝试过，但我将在我的项目中需要它。正如我所读到的，有一个名为：react-native-youtube

这里有一些关于包的信息：https ://www.npmjs.com/package/react-native-youtube

如果你等到明天，我会检查并告诉你，如果你这样做了，我离开了，如果你能告诉我进展如何...... ^^