在 React-Native 中显示视频

Question

我正在尝试以反应原生方式显示视频。但有一些问题。到目前为止，我所做的是：我安装了react-native-video。并且还链接了它。

这是代码：

import React, {Component} from 'react';


import {
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  TouchableOpacity,
  Button,
  Alert} from 'react-native';

import Video from 'react-native-video';


export default class App extends Component<Props> {

  Open() {
  }


  render() {
    return (
        <View style={styles.container}>

          <Text>
            Open the video
          </Text>

          <Button
              onPress={this.Open}
              title="Press Me"
          />
          <Video
            source={{ uri:"https://www.youtube.com/watch?v=HIB8RBhPkBA"}}
            resizeMode={"cover"}
          />

        </View>
    );
  }
}

const styles = StyleSheet.create({

  container: {
    flex: 1,
    backgroundColor : 'white',
    alignItems: 'center',
    justifyContent: 'center'
  },

});

模拟器没有错误。但也没有视频。我的设置有什么错误吗？

Answer 1

不幸的是，react-native-video 将无法工作，因为源 uri 是指向 youtube 页面的链接。除非您可以将视频作为资产获取并将其扩展名附加到其 url (...video.mp4)，否则它应该可以工作。请参阅这个。

为了快速修复，您可以使用

webview

组件嵌入链接。

Answer 2

要显示 youtube 视频，您可以使用此包 react-native-youtube

API

import YouTube from 'react-native-youtube'

<YouTube
  videoId="KVZ-P-ZI6W4"   // The YouTube video ID
  play={true}             // control playback of video with true/false
  fullscreen={true}       // control whether the video should play in fullscreen or inline
  loop={true}             // control whether the video should loop when ended

  onReady={e => this.setState({ isReady: true })}
  onChangeState={e => this.setState({ status: e.state })}
  onChangeQuality={e => this.setState({ quality: e.quality })}
  onError={e => this.setState({ error: e.error })}

  style={{ alignSelf: 'stretch', height: 300 }}
/>

要从网址获取youtube id，您可以使用

var video_id = window.location.search.split('v=')[1];
var ampersandPosition = video_id.indexOf('&');
if(ampersandPosition != -1) {
  video_id = video_id.substring(0, ampersandPosition);
}

Answer 3

我发现了一篇很棒的文章，其中展示了 3 种方法在 React JS 中使用视频

您可能会发现它很有帮助。