feat: imporve MP4Previewer demo

bilibili · Jan 15, 2024 · 1ddf27b · 1ddf27b
1 parent 99f0f4d
commit 1ddf27b
Showing 1 changed file with 35 additions and 17 deletions.
diff --git a/doc-site/docs/demo/1_4-mp4-previewer.md b/doc-site/docs/demo/1_4-mp4-previewer.md
@@ -9,35 +9,53 @@ order: 4
 从 MP4 文件中提取指定时间的图像，点击 Slider 预览任意时间点的图像。
 
 ```tsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Slider } from 'antd';
 import { MP4Previewer } from '@webav/av-cliper';
 import { assetsPrefix } from './utils';
 
 const videoSrc = assetsPrefix(['video/webav1.mp4']);
 
-const previewer = new MP4Previewer((await fetch(videoSrc)).body!);
-const mp4Info = await previewer.getInfo();
-const duration = Number((mp4Info.duration / mp4Info.timescale).toFixed(0));
+let previewer;
+let mp4Info;
+let mp4Dur;
+async function start() {
+  previewer = new MP4Previewer((await fetch(videoSrc)).body!);
+  mp4Info = await previewer.getInfo();
+  mp4Dur = Number((mp4Info.duration / mp4Info.timescale).toFixed(0));
+}
 
 export default function UI() {
-  const [imgSrc, setImgSrc] = useState<string>('');
+  const [imgSrc, setImgSrc] = useState('');
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    (async () => {
+      await start();
+      setDuration(mp4Dur);
+    })();
+  }, []);
 
   return (
     <div>
-      <div style={{ display: 'flex', alignItems: 'center' }}>
-        <span> 时间：</span>
-        <div style={{ flex: 1 }}>
-          <Slider
-            min={0}
-            max={duration}
-            step={0.1}
-            onChange={async (val) => {
-              setImgSrc(await previewer.getImage(val));
-            }}
-          />
+      {duration === 0 ? (
+        'loading...'
+      ) : (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <span> 时间：</span>
+          <div style={{ flex: 1 }}>
+            <Slider
+              min={0}
+              max={duration}
+              step={0.1}
+              onChange={async (val) => {
+                setImgSrc(await previewer.getImage(val));
+              }}
+            />
+          </div>
+          <span>{duration}s</span>
         </div>
-      </div>
+      )}
       {imgSrc && <img src={imgSrc} style={{ width: '100%' }} />}
     </div>
   );