Updating Source Url on HTML5 Video with React

Updating source URL on HTML5 video with React

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.

updating HTML5 video src in reactjs

Updating the src on the <source /> tag doesn't seem to do anything after it's already been set.

Either set the src of the video manually by using refs or a better way by passing the src to the <video /> component.

 <video width="750" height="480" controls id='thevid' src={this.props.user.video} />

HTML Video tag not updating source on re render

React doesn't know which video to update unless key property for each video is provided.

So when you set the key prop for the video to something unique, say url pass to the player, it should work.

const LandingPageVideoPlayer = ({ url, isActive }) => {
  const playerClassName = `video-player ${
    isActive ? "video-player--is-active" : null
  }`;

  return (
         ..... .....
    <video key={url} className={playerClassName} autoplay loop muted>
      <source src={url} type="video/mp4" />
    </video>
  );
};

Check out the working demo.

For more information how the key property works, check out the official documentation List and Keys.

The first sentence reads,

Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity

In your case, you have two videos (which is actually a list of two items), so to help React which video has changed, key would help React to identify which video has changed.

How to get ReactJS video src to conditionally change

Working example at codesandbox

To understand this in detail visit this question. This one is a duplicate.

Video displayed in ReactJS component not updating

Found the answer

Dynamically modifying a source element and its attribute when the element is already inserted in a video or audio element will have no effect. To change what is playing, just use the src attribute on the media element directly, possibly making use of the canPlayType() method to pick from amongst available resources. Generally, manipulating source elements manually after the document has been parsed is an unnecessarily complicated approach

https://html.spec.whatwg.org/multipage/embedded-content.html#the-source-element

It's a pretty hacky and fragile, but it got the job done for my cases.

(function(){
  var React = require('react');

  var VideoView = React.createClass({

    pickSource: function(media){
      var vid = document.createElement('video');

      var maybes = media.filter(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        return (vid.canPlayType('video/'+ext) === 'maybe');
      });

      var probablies = media.filter(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        return (vid.canPlayType('video/'+ext) === 'probably');
      });

      var source = '';

      if (maybes.length > 0) { source = maybes[0]; }
      if (probablies.length > 0) { source = probablies[0]; }
      source = (source === '')? '' : 'content/'+source;
      return source;
    },

    render: function(){
      var video = this.props.video;
      var title = video.title === ''? video.id : video.title;

      var src = this.pickSource(video.media);

      var downloadNodes = video.media.map(function(media){
        var ext = media.split('.').slice(-1)[0].toUpperCase();
        media = 'content/'+media;
        return (
          <li><a className="greybutton" href={media}>{ext}</a></li>
        )
      });

      return (

        <div className="video-container">   
          <video title={title} src={src} controls width="100%"></video>
          <h3 className="video-title">{title}</h3>
          <p>{video.description}</p>
            <div className="linkbox">
              <span>Downloads:</span>
              <ul className="downloadlinks">
                {downloadNodes}
              </ul>
            </div>

        </div>

      )
    }
  });

  module.exports = VideoView;

})();

Using youtube link as src in video components the video is not getting load in reactjs

Don't use video tag if you want to use YouTube links

Also, if your YouTube link looks like https://www.youtube.com/watch?v=TlN5frP4VuI&t=253s

then maybe your video will not work.

so, use https://www.youtube.com/embed/eSIJddEieLI?autoplay=1&mute=1

example:-

                            <iframe
                            width="420"
                            height="315"
                            src="https://www.youtube.com/embed/eSIJddEieLI? 
                            autoplay=1&mute=1"
                            title="YouTube video player"
                            frameborder="0"
                          ></iframe>

react js html5 video not working

As noted in the comments by @Pavan kumar Dasireddy, you want to use the autoPlay attribute (notice the capital P).

<video  loop autoPlay>
    <source src= { covervid } type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
    <source src={ covervidtwo } type="video/ogg" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>

if you look in your console you will see:

Warning: Invalid DOM property `autoplay`. Did you mean `autoPlay`?

---

Related Topics