title: static video url for videojs in reactjs is playing but not url coming dynamically from database
body: <p>video link is of type mp4, when I mention the static link for the video in source it video plays very well, but when the video link is taken dynamically from the database, video is not playing, react is throwing an error like this...</p>
  
  <blockquote>
    <p>VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media.</p>
  </blockquote>
  
  <p>can anyone assist me??</p>
  
  <pre><code>componentDidMount = () =&gt; {
      this.getvideobyid()
  }
  
  async getvideobyid() {
      try{
          const response = await 
          axios.get('http://localhost:8080/get_videos/2');
          this.setState({
          video_url: response.data.video_list[0].url_for_video 
          })
          }
      catch(error){
              console.log('eror while fetching.....', error)
      }
  }
  
  render() {
      const videoJsOptions = {
            width: 720,
            height: 300,
            controls: true,
            sources: [{
                 src: this.state.video_url,
                 type: 'video/mp4',
                 },
              ]
        };
      return (
        &lt;div&gt;
            &lt;VideoPlayer 
            {...videoJsOptions}
            /&gt;
        &lt;/div&gt;
      )
  }
  
  
  
  export default class VideoPlayer extends React.Component {
      componentDidMount() {
      this.player = videojs(this.videoNode, this.props, function 
      onPlayerReady() {
          console.log('onPlayerReady', this)
      });
    }
  
  componentWillUnmount() {
      if (this.player) {
      this.player.dispose()
  }
  }
  
  componentWillReceiveProps(newProps) {
      if (this.player) {
      this.player.src({
      type: 'video/mp4',
      src: newProps.video_url
      });
     } 
  }
  
  render() {
      console.log('what render is there in node......', this.props)
          return (
              &lt;div&gt;    
                  &lt;div data-vjs-player&gt;
                  &lt;video ref={ node =&gt; this.videoNode = node } 
                  className="video-js"&gt;      
                  &lt;/video&gt;
              &lt;/div&gt;
              &lt;/div&gt;
              )
        }
  }
  </code></pre>
  
  <p>updating with the code.
  as u can see, for one source I have given the static link, it is commented now, it is playing but the other source is dynamically coming from DB and I have set state. it is not playing. I want that video to be played when the link is coming from the database.</p>