时间戳

首页 > 解决方案 > 如何在 expo-av react native 中使用本地 mp4 文件

react-native - 如何在 expo-av react native 中使用本地 mp4 文件

问题描述

我已将其全部设置为加载 uri，它与 expo 文档中的示例基本完全相同。我不知道如何改用我的本地文件系统。我的文件系统中有 mp4，但是当我将路径链接到文件系统时，屏幕变为空白，没有任何显示。我将包含我正在使用但似乎无法使其工作的代码片段

import * as React from "react";
import { View, StyleSheet, Button } from "react-native";
import { Video, AVPlaybackStatus } from "expo-av";

export default function App() {
  const video = React.useRef(null);
  const [status, setStatus] = React.useState({});
  return (
    <View style={styles.container}>
      <Video
        ref={video}
        style={styles.video}
        source={{
          videoURL: require("../assets/videos/TestVideo.mp4"),
        }}
        useNativeControls
        resizeMode="contain"
        isLooping
        onPlaybackStatusUpdate={(status) => setStatus(() => status)}
      />
      <View style={styles.buttons}>
        <Button
          title={status.isPlaying ? "Pause" : "Play"}
          onPress={() =>
            status.isPlaying
              ? video.current.pauseAsync()
              : video.current.playAsync()
          }
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  video: {
    flex: 1,
  },
});

标签： react-nativeexpo

解决方案

文档中没有提到videoURL位，所以只需放下它，您就会看到视频：

source={require("../assets/videos/TestVideo.mp4")}

推荐阅读