视频同时播放- React Native

xjreopfe 于 2022-12-19 发布在 React

关注(0)|答案(2)|浏览(163)

我有两个来自https://www.npmjs.com/package/react-native-video的视频，我没有激活控件，我的目的是通过按下按钮来激活和取消激活视频。我用状态来做，我的问题是当我按下按钮暂停或播放视频时，所有视频都播放，而不仅仅是一个。
我在JSON中有一个视频列表，并迭代所有这些视频。
下面是我的代码片段：

const [paused, setPaused] = useState(false);

const playVideo = () => {
    setPaused(!paused);
}

{videos.map((video) => (
    <Video
        source={{ uri: video.video }}
        rate={1.0}
        volume={1.0}
        resizeMode="cover"
        style={styles.video}
        paused={paused}
        onEnd={() => setPaused(true)}
    />
    {paused && (
        <View style={styles.videoPause}>
            <Text style={styles.title}>{video.titulo}</Text>
            <Text style={styles.description}>{video.descripcion}</Text>
            <TouchableOpacity style={styles.playButton} onPress={() => playVideo()}>
                <CustomIcon name="play" size={90} color={'#fff'} />
            </TouchableOpacity>
        </View>
    )}

))}

react-native

来源：https://stackoverflow.com/questions/72989789/videos-play-at-the-same-time-react-native

2条答案

按热度按时间

brtdzjyr1#

问题是你的状态，你应该做一个组件来 Package 视频和管理播放/暂停状态。这样你就可以单独控制每个视频。

赞(0）回复(0）举报 2022-12-19

svgewumm2#

首先创建一个具有独立状态的组件，而不是像这里那样的全局组件。

示例：

export default function VideoPlayer(props) {
  const { styles, video } = props
  const [paused, setPaused] = useState(false)

  const playVideo = () => {
    setPaused(!paused)
  }

 return (
  <View>
    <Video
    paused={paused}
    rate={1.0}
    resizeMode="cover"
    source={{ uri: video.video }}
    style={styles.video}
    volume={1.0}
    onEnd={() => setPaused(true)}
  />

  {
    paused && (
      <View style={styles.videoPause}>
        <Text style={styles.title}>{video.titulo}</Text>
        <Text style={styles.description}>{video.descripcion}</Text>
        <TouchableOpacity style={styles.playButton} onPress={() => playVideo()}>
          <CustomIcon color="#fff" name="play" size={90} />
        </TouchableOpacity>
      </View>
    )
  }
}

）
然后像这样在页面中呈现它：

{videos.map((video) => <VideoPlayer styles={...YOUR_STYLES} video={video}/>}

如果愿意，您还可以在组件内部声明样式，但这样就不需要将它们作为 prop 传递。

赞(0）回复(0）举报 2022-12-19

我来回答

视频同时播放- React Native

2条答案

相关问题

热门标签

最新问答