Video-react in videoJS not loading after src is updated

Question

I am using Video-react (https://video-react.js.org/components/player/) and on the page, it says I can use this.refs.player.load() once I have updated its source. But I do not think that method is supported any more as It will not work at all plus I could not find it in the source code downloaded with npm.

Is there another way to do this or has anyone found a solution? This is my partial code:

                var videoRow = document.createElement("div");
            videoRow.className = 'col-md-4';
            videoRow.setAttribute("id", "videoRows");
            //create the myPlayer div which will contain the Player. 
            var myPlayerDiv = document.createElement("div");
            myPlayerDiv.setAttribute("id", "myPlayer");
            //create my player with the information from the attributes.
            var videoPlayer = document.createElementNS('', 'Player');
            videoPlayer.setAttribute("src", data.val().videoURL);
            videoPlayer.setAttribute("ref","player");
            myPlayerDiv.appendChild(videoPlayer);
            videoRow.appendChild(myPlayerDiv);
            document.getElementById('videoList').appendChild(videoRow);
             this.refs.player.load();

This has not worked. I tried renaming the ref but still nothing. The div shows up but not the player.

Edit: Just found this in the Player.js component but can't figure out how to implement it: Player.js component source code

score 1 · Answer 1 · answered Jul 20 '17 at 01:19

The reason this.refs is not exists is because your code is simply touch the DOM directly rather than use React lifecycle. Please modify code in the following manner

import React from 'react';
import { Player } from 'video-react';

class DisplayVideo extends React.Component {
    render () {
      const { data } = this.props
      return (
        <div className="col-md-4" id="videoRows">
          <div id="myPlayer">
            <Player src={data.val().videoURL} ref={(el) => this.player = el} />
          </div>
        </div>
      )
    }

    componentDidMount () {
      this.player.load()
    }
}

Video-react in videoJS not loading after src is updated

1 Answers1