Set src directly when HLS not supported

src/element/live-video-player.tsx

@@ -13,14 +13,15 @@ export function LiveVideoPlayer(
   const video = useRef<HTMLVideoElement>(null);
   const streamCached = useMemo(() => props.stream, [props.stream]);
   const [status, setStatus] = useState<VideoStatus>();
+  const [src, setSrc] = useState(props.src);
 
   useEffect(() => {
     if (
       streamCached &&
       video.current &&
-      !video.current.src &&
-      Hls.isSupported()
+      !video.current.src
     ) {
+      if (Hls.isSupported()) {
         try {
           const hls = new Hls();
           hls.loadSource(streamCached);
@@ -42,14 +43,24 @@ export function LiveVideoPlayer(
           console.error(e);
           setStatus(VideoStatus.Offline);
         }
+      } else {
+        setSrc(streamCached);
+        setStatus(VideoStatus.Online);
+        video.current.muted = true;
+        video.current.load();
+      }
     }
   }, [video, streamCached]);
+
   return (
     <>
       <div className={status}>
         <div>{status}</div>
       </div>
-      <video ref={video} {...props} controls={status === VideoStatus.Online} />
+      <video ref={video} {...{
+        ...props,
+        stream: undefined
+      }} src={src} controls={status === VideoStatus.Online} />
     </>
   );
 }