标签: react-native-video

我正在使用这样的视频组件：

<Video style={[videoPlayerStyle, this.props.containerStyle, {height: videoHeight, width: videoWidth}] }
      source={{uri: this.props.videoURL}}
      ref={(ref) => {
        this.player = ref
    }} 
      paused={this.state.paused}
      controls={nativeControls}
      playInBackground={false}
      repeat={false} 
      key="something123"
      muted={this.state.mute}

      onBuffer={this.onBuffer}
      onEnd={this.onEnd}
      onError={this.onError}
      onLoad={this.onLoad}
      onLoadStart={this.onLoadStart}
      onProgress={this.onProgress}
    />

视频结束后，我会显示一个按钮，允许用户再次播放。我尝试使用：

restartPlayingVideo = (dict) => {
  this.player.seek(0) // I tried with and without this
  this.setState({paused: false})
}

但该视频不会在 Android 上再次开始（在 iOS 上运行良好）。

我错过了什么吗？

在我的react-native项目中，我使用react-navigation 5进行导航，使用react-native-video作为音频/视频播放器。

我的要求是，当用户导航到另一个屏幕时，音频/视频是否应该停止播放。然而，这并没有发生，音频继续播放。

我在堆栈导航器中创建了两个屏幕。视频播放器是一个单独的组件。

屏幕代码：

function MainScreen({ navigation }) {
  const [audiostatus, setAudioStatus] = useState(true);

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('blur', () => {
      console.log('Leaving Home Screen');
      setAudioStatus(true);
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View style={{ flex: 1, justifyContent: 'center',backgroundColor: '#fff' }}>
      <Player tracks={TRACKS} paused={audiostatus} />
      <Button
        title="Go to Screen Without Audio"
        onPress={() => navigation.navigate('No Audio Screen')}
      />
      <Button
        title="Go to Screen With Another Audio (Love Yourself)"
        onPress={() => navigation.navigate('Another Audio Screen')}
      />
    </View>
  );
}

播放器代码 在播放器内，我收到暂停属性来决定视频是否应该已经播放或暂停。然后播放器可以通过更改状态来控制播放。 …

我正在使用 react-native-video。我正在尝试更改每个视频 onPress 的道具，这些道具位于视频的 FlatList 中。所以如果我使用 state 它将改变整个 FlatList 中的所有视频道具，而我只想改变一个。

我创建：const videoPlayer = []在每个视频播放像添加了一个参考：ref={r => videoPlayer[item.id] = r}，我知道我能做到videoPlayer[item.id].presentFullscreenPlayer()在全屏播放的视频，因为它是玩家的一种方法，但如何控制像其他的属性resizeMode和paused？

我试过了videoPlayer[item.id].props.paused = false，但没有效果。我还想象我可以在 state 中创建某种复杂的对象，但是每次更改属性时整个列表都会更新，这可能会导致大列表中的刷新运行缓慢。

那么，有没有办法像我解释的那样控制每个视频的道具？

我正在使用react-native-video组件来播放视频。

问题：
我想知道视频的尺寸，以便我可以调整其他一些项目。

当我将 ref 存储为

<Video
    ref={ref => setVideoRef(ref)}
    resizeMode={'contain'}
/>

我可以访问videoRef.props.scaleX和videoRef.props.scaleY，但它们始终是未定义的，即使视频已完全加载。如何访问视频形状/尺寸？

我正在尝试使用 react-native-video 组件如下：

export default class VideoWrapper extends Component<Props> {

  render() {
    return (
        <Video
          source={require('../../assets/test_sound.mp3')}
          ref={player => {
            this.player = player;
          }}
          muted={false}
          repeat={false}
          resizeMode={"cover"}
          volume={1.0}
          rate={1.0}
          ignoreSilentSwitch={"obey"}
          onProgress={this.onProgress}
          onSeek={this.onSeek}
          onEnd={this.onEnd}
          onError={this.onError} 
        />
    );
  }
  onEnd() {
    this.player.seek(0);
  }
  ...

结果是：

ExceptionsManager.js:74 无法读取未定义的属性“寻求”

如果我将 onEnd 方法更改为以下内容，它会起作用：

onEnd={ () => this.player.seek(0) }

我不想使用第二种方法，因为它使我的 xml 代码变得混乱。我该如何解决第一种方法？

我正在尝试使用@react-native-community/react-native-video播放来自 CloudFront 的安全视频。

要重现视频，我必须设置 3 个 cookie：CloudFront-Key-Pair-Id、CloudFront-Policy 和 CloudFront-Signature。

我已经能够使用这个模块在 IOS 中重现视频：react-native-cookies

但我无法在 android 中重现视频。如何设置 cookie 来播放此视频？

该视频是 .m3u8 扩展名 (HLS)

非常感谢！

我是 React-native 的初学者，我想在我的应用程序上显示一个视频。我现在正在使用 react-native-video。

import React from 'react';
import { StyleSheet, Text, View, requireNativeComponent } from 'react-native';
import Video from 'react-native-video';

export default function App() {
  return (
    <View style={styles.container}>
        <Video source={{uri:"loading.mp4"}}
            ref={(ref) => {
              this.player = ref
            }}                                      // Store reference
            onBuffer={this.onBuffer}                // Callback when remote video is buffering
            onError={this.videoError}               // Callback when video cannot be loaded
            style={styles.backgroundVideo}/> 
    </View>

  );
}

然后我有这个错误

Attempted import error: 'requireNativeComponent' is not exported from 'react-native-web/dist/index'.

请告诉我为什么会发生这种情况以及我该如何解决。

我使用“react-native-video”库，它与外部链接一起使用，例如： https: //www.w3schools.com/tags/movie.mp4

当我添加 firebase 存储的 URL 时，它不会显示。有谁可以帮助我解决这个问题吗？firebase视频的链接是： https://firebasestorage.googleapis.com/v0/b/ukkepuk-7d9dc.appspot.com/o/movie.mp4 ?alt=media&token=13ab1963-be1e-4974-9c5f-111d2d8256c5

这是有效的代码：

   <Video 
source={{ uri: 'https://www.w3schools.com/tags/movie.mp4' }}
style={styles.backgroundVideo}
rate={1} volume={1} muted={true}
repeat={true}
resizeMode='cover' key="video1" 

/>

而不是这个：

   <Video 
source={{ uri: 'https://firebasestorage.googleapis.com/v0/b/ukkepuk-7d9dc.appspot.com/o/movie.mp4?alt=media&token=13ab1963-be1e-4974-9c5f-111d2d8256c5' }}
style={styles.backgroundVideo}
rate={1} volume={1} muted={true}
repeat={true}
resizeMode='cover' key="video1" 

/>

这是同一个视频。在这两种情况下，只有 1 个位于 Firebase 存储之外的远程位置。我没有收到错误，只是应用程序停止了。