React原生视频不显示总视频时间

ufj5ltwl  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(166)

这是我的代码:

export default function VideoPlayer() {
  const videoPlayerRef = useRef(null);
  const [status, setStatus] = useState({});
  const [totalDuration, setTotalDuration] = useState(null);

  return (
    <View style={styles.container}>
      <Video
        ref={videoPlayerRef}
        source={'https://samplelib.com/lib/preview/mp4/sample-5s.mp4'}
        onLoad={status => setTotalDuration(() => status)}
      />
      <Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>
    </View>
  );
}

我希望从Video参数onLoad获取总视频时长。但是我得到了一个错误代码:

<Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>

输出:Cannot read properties of null (reading 'durationMillis')。你知道那里出了什么问题吗

bwitn5fc

bwitn5fc1#

totalDuration状态初始化为空值,您应该处理对象可能未定义的情况。

<Text style={styles.timestamp}>{totalDuration?.durationMillis}</Text>
ie3xauqp

ie3xauqp2#

代码中的问题是您试图在设置totalDuration之前访问它的durationMillis属性。最初,totalDuration被设置为null,并且它只在Video组件的onLoad回调中更新。由于onLoad回调是异步的,所以更新totalDuration需要一些时间,在此期间,您将尝试访问其属性。
若要解决此问题,可以添加条件呈现检查,以仅在totalDuration.durationMillis可用时才显示它。下面是代码的更新版本:

export default function VideoPlayer() {
  const videoPlayerRef = useRef(null);
  const [status, setStatus] = useState({});
  const [totalDuration, setTotalDuration] = useState(null);

  const handleOnLoad = (videoStatus) => {
    setTotalDuration(videoStatus);
  };

  return (
    <View style={styles.container}>
      <Video
        ref={videoPlayerRef}
        source={{ uri: 'https://samplelib.com/lib/preview/mp4/sample-5s.mp4' }}
        onLoad={handleOnLoad}
        onPlaybackStatusUpdate={(newStatus) => setStatus(() => newStatus)}
      />
      {totalDuration && (
        <Text style={styles.timestamp}>{totalDuration.durationMillis}</Text>
      )}
    </View>
  );
}

在这个更新的代码中,我在呈现组件之前添加了对totalDuration的检查。只有当totalDuration具有值时,才会呈现组件,从而防止出现您遇到的错误。此外,我还更改了Video组件的源属性,以使用带有uri属性的对象而不是字符串。
确保处理其他可能的错误场景,并进一步定制代码以满足您的特定需求。

相关问题