feat: Support more recording URL format

src/element/live-video-player.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import ReactPlayer from 'react-player'
+import ReactPlayer from "react-player";
 
 export enum VideoStatus {
   Online = "online",
@@ -21,29 +21,21 @@ export function LiveVideoPlayer(props: VideoPlayerProps) {
       <div className={status}>
         <div>{status}</div>
       </div>
-        <ReactPlayer
-          autoPlay
-          playing={true}
-          className='video-player'
-          url={streamCached}
-          width='100%'
-          height='100%'
-          controls={true}
-          playsinline={true}
-          light={<img src={props.poster}
-            alt='Thumbnail'
-            style={{
-              maxHeight:"100%",
-              maxWidth:'100%'
-            }} 
-          />}
-          onProgress={()=>{
-            setStatus(VideoStatus.Online);
-          }}
-          onError={()=>{
+      <ReactPlayer
+        controls
+        playing
+        url={streamCached}
+        config={{ file: { attributes: { poster: props.poster } } }}
+        className="video-player"
+        width="100%"
+        height="100%"
+        onStart={() => setStatus(VideoStatus.Online)}
+        onError={(type, error) => {
+          if (error?.type === "networkError") {
             setStatus(VideoStatus.Offline);
-          }}
-        />
+          }
+        }}
+      />
     </div>
   );
 }