expo-video-player

Step.1 安装

expo install expo-video-player

expo install expo-av @react-native-community/netinfo @react-native-community/slider

Step.2 使用

import { Video } from 'expo-av'
import VideoPlayer from 'expo-video-player'

<VideoPlayer
  videoProps={{
    shouldPlay: true,
    resizeMode: Video.RESIZE_MODE_CONTAIN,
    source: {
      uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    },
  }}
  inFullscreen={true}
/>

视频列表解决思路

1. 用图片作为列表
2. 用model模态框作为全屏视频播放的窗口
3. 点击图片触发模态框加载视频自动播放

<Button onPress={() => setVisible(true)}>
    TOGGLE MODAL
</Button>
<Modal
        visible={visible}
        backdropStyle={styles.backdrop}
        onBackdropPress={() => setVisible(false)}>
    <Button style={styles.closebutton} onPress={() => setVisible(false)} accessoryLeft={closeIcon} />
    <View style={{paddingBottom: 0}}>
        <VideoPlayer
            videoProps={{
              shouldPlay: true,
              resizeMode: Video.RESIZE_MODE_CONTAIN,
              // source: {
              //   uri: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
              // },
              source: require('../assets/videos/big_buck_bunny.mp4')
            }}
            showControlsOnLoad={true}
            inFullscreen={true}
            showFullscreenButton={false}
          />
    </View>
</Modal>