streaming rtsp media into an html5 page shows something in one browser but not others

I have a cam that sends via rtsp, it is live and i can watch it using vlc media player without any problem, but i want to embed that to my page and watch it there, i searched stackoverflow for a way doing that and found this:
https://stackoverflow.com/a/49377425/5183578

when i try it in normal html5 it works without problem:

English is not my mother language so there could be mistakes. 

<!DOCTYPE html>
<html>
<body>

<h1>The video element</h1>


 <video id="video" controls width="250"> 

     <source src="http://...:8080" >


   
 </video> 


</body>
</html>

My problem is doing that in react, using firefox browser, i can see the stream but it is stopped and i need to refresh the page for it to move if i dont refresh it is like an image. In my stream i have date and time moving, when i refresh the page i can see seconds changing:
enter image description here

trying it with chrome and edge it shows this :

enter image description here

here is my react code:

  const CameraPreviewCanvas = useRef<any>();
  const CameraPreviewImage = useRef<any>();
 
 useEffect(() => {
    updateCanvas();
    const img = CameraPreviewImage.current;
    img.onload = updateCanvas;

    // unmount component when the camera is changed  to prevent memory leaks
    return () => {
      img.onload = null;
    };
  });
 
 <div style={state?.config?.previewStyle}>
        <div style={{ padding: "15px" }}>
          <canvas
            ref={CameraPreviewCanvas}
            width={canvasRenderWidth}
            height={canvasRenderHeight}
            onClick={onClickCanvas}
            onMouseMove={onMouseOverCanvas}
            style={canvasStyle}
          ></canvas>

          <video
            id="video"
            loop
            autoPlay={true}
            muted
            preload="auto"
            width="250"
            ref={CameraPreviewImage}
           
            style={{ display: "none" }}
          >
            <source src="http://...:8080" />

            <source src="http://...:8080" />
          </video>

         
        </div>
      </div>