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;

})();

I have described some approaches for plain JavaScript here. Based on that I have found solutions for React which work for me:

• using src attribute on video itself:

  var Video = React.createComponent({
    render() {
      return <video src={this.props.videoUrl} />;
    }
  });
  

  Dana's answer is a great option extending this solution.

• using .load() call on video element:

  var Video = React.createComponent({
    componentDidUpdate(_prevProps, _prevState) {
      React.findDOMNode(this.refs.video).load(); // you can add logic to check if sources have been changed
    },
  
    render() {
      return (
        <video ref="video">
          {this.props.sources.map(function (srcUrl, index) {
            return <source key={index} src={srcUrl} />;
          })}
        </video>
      );
    }
  });
  

UPD:

• of course it's possible to add unique key attribute for <video> tag (for example based on your sources), so when sources will change it will be changed as well. But it will cause <video> to be re-rendered completely and it may cause some UI flashes.

  var Video = React.createComponent({
    render() {
      return (
        <video key={this.props.videoId}>
          {this.props.sources.map(function (srcUrl, index) {
            return <source key={index} src={srcUrl} />;
          })}
        </video>
      );
    }
  });
  

I faced the same issue and I didn't have access to the <video> HTML tag as I was using a library to render the video (not the native <video> HTML tag) which is internally responsible for rendering the <video> tag.

In this case I have found another solution which I think is better to solve the same issue.

Before:

<VideoLibrary src={this.props.src} />

After:

<React.Fragment key={this.props.src}>
  <VideoLibrary src={this.props.src} />
</React.Fragment>

Or this if you're using the native <video> HTML tag:

<React.Fragment key={this.props.src}>
  <video src={this.props.src} />
</React.Fragment>

This way React will render different video tags because the src prop will be different hence rendering a different HTML tag each time to avoid this issue.

I find this way cleaner and simpler and will work in both cases if you have or don't have access to the <video> HTML tag.