score:145

Accepted answer

quick and dirty awnser: add a key prop to <clip> or <video>, e.g.:

function clip({ url }) {
  return (
    <video key={url}>
      <source src={url} />
    </video>
  );
}

recommended awnser: trigger a load event for the video element whenever there's a new url, e.g.:

function clip({ url }) {
  const videoref = useref();

  useeffect(() => {    
    videoref.current?.load();
  }, [url]);

  return (
    <video ref={videoref}>
      <source src={url} />
    </video>
  );
}

explanation: the video initially doesn't change because in essence you're only modifying the <source> element and react understands that <video> should remain unchanged, so it does not update it on the dom and doesn't trigger a new load event for that source. a new load event should be triggered for <video>.

the dirty answer works because when you change the key of a react element, react understands that's a whole new element. it then creates a new element in the dom which naturally will have its own load event triggered on mount.

score:0

bind the url in the src property of video tag and not source tag

<video autoplay loop muted playsinline="true" webkit-playsinline="true" [src]="videosrc" type="video/mp4">

score:0

add a parent div to second video
my code:

{ismobile ? (
            <video
              autoplay={true}
              loop
              classname="moviles"
              muted
              playsinline
              poster="/totto/kids.png"
            >
              <source src="/totto/losmoviles.webm"></source>
              <source src="/totto/losmoviles.mp4"></source>
            </video>
          ) : (
            <div>
              <video
                autoplay={true}
                loop
                classname="moviles2"
                muted
                playsinline
                poster="/totto/portada.jpg"
              >
                <source src="/totto/moviles.webm"></source>
                <source src="/totto/moviles.mp4"></source>
              </video>
            </div>
          )}

score:0

you can use the key attribute :

<video key={videourl} autoplay width="100%">
  <source src={videourl} type="video/mp4"></source>
</video>

if the video's key attribute change, the video component will be re-mounted

score:21

changing the src of <source /> doesn't seem to switch the video for some reason. this isn't a react issue i don't think. probably just how <source /> works. maybe you have to call .load() on the element again. but it's just easier to set it directly on the element itself.

see the comment to the top answer: can i use javascript to dynamically change a video's source?

you can set src directly on element instead:

function clip(props) {
  return (
    <video width="320" height="240" src={props.url} controls autoplay>
    </video>
  )
}

Related Query

More Query from same tag