Question

我已经复制并引用了所有使用视频的起始文件作为我的反应原生的背景但它仍然没有显示。我没有收到任何错误。我已经引用了这些文档并且已经坚持了2个小时。

这是我的代码

import React, { Component } from "react";
import { AppRegistry, StyleSheet, Text, View, TextInput } from "react-
native";

import Video from "react-native-video";
import LightVideo from "./Turntablevid.mp4";

  export default class BackgroundVid extends Component {
    render() {
     return (
      <View style={styles.container}>
       <Video repeat source={LightVideo} resizeMode="cover" style=
        {StyleSheet.absoluteFill} />
      <View>
       <Text style={styles.header}>Login</Text>
       <TextInput
        placeholder="Email"
        style={styles.input}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        style={styles.input}
      />
    </View>
  </View>
  );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 alignItems: "center",
 justifyContent: "center",
  },
 header: {
 fontSize: 30,
 color: "#FFF",
 backgroundColor: "transparent",
 textAlign: "center"
  },
  input: {
  width: 300,
  height: 50,
  backgroundColor: "#FFF",
  marginVertical: 15,
  paddingLeft: 15
   }
  });

Answer 1

使用此示例：

<Video source={require('./Turntablevid.mp4')}
       ref={(ref) => {
         this.player = ref
       }}                                      // Store reference
       rate={1.0}                              // 0 is paused, 1 is normal.
       volume={1.0}                            // 0 is muted, 1 is normal.
       muted={false}                           // Mutes the audio entirely.
       paused={false}                          // Pauses playback entirely.
       resizeMode="cover"                      // Fill the whole screen at aspect ratio.*
       repeat={true}                           // Repeat forever.
       playInBackground={false}                // Audio continues to play when app entering background.
       playWhenInactive={false}                // [iOS] Video continues to play when control or notification center are shown.
       ignoreSilentSwitch={"ignore"}           // [iOS] ignore | obey - When 'ignore', audio will still play with the iOS hard silent switch set to silent. When 'obey', audio will toggle with the switch. When not specified, will inherit audio settings as usual.
       progressUpdateInterval={250.0}          // [iOS] Interval to fire onProgress (default to ~250ms)
       onLoadStart={this.loadStart}            // Callback when video starts to load
       onLoad={this.setDuration}               // Callback when video loads
       onProgress={this.setTime}               // Callback every ~250ms with currentTime
       onEnd={this.onEnd}                      // Callback when playback finishes
       onError={this.videoError}               // Callback when video cannot be loaded
       onBuffer={this.onBuffer}                // Callback when remote video is buffering
       onTimedMetadata={this.onTimedMetadata}  // Callback when the stream receive some metadata
       style={styles.backgroundVideo} />

// Later to trigger fullscreen
this.player.presentFullscreenPlayer()

// To set video position in seconds (seek)
this.player.seek(0)

// Later on in your styles..
var styles = StyleSheet.create({
  backgroundVideo: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
  },
});

Answer 2

我们可以使用 Appstate 来停止背景视频....

此 example 将有助于检测应用程序的后台状态。

然后您可以将您的方法置于该状态到此条件：

if nextAppstate === 'background' then setstate your Pausemethod()

React原生背景视频未显示

2 个答案: