Updating source URL on HTML5 video with React

by

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.

More Related Contents:

  1. How to Protect website code PHP / JS? [closed]
  2. changing source on html5 video tag
  3. Insert HTML with React Variable Statements (JSX) [duplicate]
  4. When to use functional setState
  5. Concatenating variables and strings in React
  6. Streaming a video file to an html5 video player with Node.js so that the video controls continue to work?
  7. HTML 5 video or audio playlist
  8. ReactJS – .JS vs .JSX
  9. React.js: Set innerHTML vs dangerouslySetInnerHTML
  10. Can I use javascript to dynamically change a video’s source?
  11. ReactJS: “Uncaught SyntaxError: Unexpected token
  12. React: why child component doesn’t update when prop changes
  13. Detect if HTML5 Video element is playing [duplicate]
  14. React: how to load and render external html file?
  15. How to mute an html5 video player using jQuery
  16. play pause html5 video javascript
  17. css position absolute making the textbox go down
  18. How to change the playing speed of videos in HTML5?
  19. Adding a new line in a JSX string inside a paragraph – React
  20. React.js this.props.data.map() is not a function
  21. Using Matter.js to render to the DOM or React
  22. canvas.toDataURL() Security Error The operation is insecure
  23. render html in state string [duplicate]
  24. How can I set preview of video file, selecting from input type=’file’
  25. React, losing saved data in localStorage with useEffect after page refresh
  26. Images not loading when relative path is used in React
  27. Create thumbnail from video file via file input
  28. Measuring text width/height without rendering
  29. Media Source Api not working for a custom webm file (Chrome Version 23.0.1271.97 m)
  30. How to parse html to React component?

Leave a Comment