CODEWITHSUNDEEP
javascriptjqueryfacebookvideoreactjs
toy
toy

Reputation: 12151

How to update source of video using Facebook React?

I'm new to React.

I'm trying to update the source of the video using React. Everything went well, but I had to click the button twice for the video to load. I'm not sure what caused that.

Here's my code.

class Dashboard extends React.Component {
    constructor() {
        super();
        this.chooseVideo = this.chooseVideo.bind(this);
        this.state = {
            videoPreviewUrl: ''
        }
    }
    chooseVideo (fileUrl) {
        this.setState({videoPreviewUrl: fileUrl});
        var vid = document.getElementById('videoPreview');
        vid.load();
    }

    render() {
        return <div>
                <VideoEditor url={this.state.videoPreviewUrl}/>
            </div>
    }
}


class VideoEditor extends React.Component {
    render () {
        return <div id="videoEditorPane" className="col-md-9">
            <div className="row">
                <div className="col-md-6">
                    <video id="videoPreview" preload="auto" width="640" height="480">
                        <source src={this.props.url} type="video/mp4" />
                    </video>
                    <StoryBoard/>
                </div>
            </div>
        </div>;
    }
}

The method chooseVideo is being passed the url of the video correctly. So, I thought I would just change the state of that. When I see the source code of the DOM, the source of the video is changed correctly. However, I have to click it twice. I'm not sure if this is the racing problem between this.State() and vid.load()?

Upvotes: 0

Views: 87

Answers (1)

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

Put the vid.load() in componentWillReceiveProps(nextProps) in VideoEditor. That way you can avoid timing issues.

Upvotes: 1

Related Questions