Video displayed in ReactJS component not updating

Question

I\'m new to ReactJS (0.13.1), and I\'ve created a component in my app to display HTML5 video.

It seems to work perfectly but only for the first selection. The vid

Answer 1

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 (
          
{ext}
        )
      });

      return (

        
   
          
          
{title}
          
{video.description}
            

              Downloads:
              

                {downloadNodes}
              
            

        

      )
    }
  });

  module.exports = VideoView;

})();