CODEWITHSUNDEEP
reactjsvideo.js
Venkat
Venkat

Reputation: 551

React.Js and Video.js integration

Following below article i am trying to show the videos in my react application.

reactjsvideojs But videos are not getting updated when i render video component dynamically.

RenderVideo(path){
const videoJsOptions = {
autoplay: true,
controls: true,
sources: [{
src: path,
type: 'video/mp4'
}]
}

return <VideoPlayer { ...videoJsOptions } />
}

Calling when i click on the video thumbnails.

 {props.imgs[index].mediaType === 'VIDEO' && (
      <div className={styles.videoContainer}> 
             {RenderVideo(props.imgs[index].primaryLink)}
      </div>
    )}

VideoJsplayer component

class VideoJsPlayer extends React.Component {
  componentDidMount() {
    const { onReady, ...options } = this.props;
    this.player = videojs(this.videoNode, options, onReady);
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  render() {
    /* eslint-disable jsx-a11y/media-has-caption */
    return (
      <div data-vjs-player>
        <video
          ref={node => (this.videoNode = node)}
          className="video-js vjs-big-play-centered"
        />
      </div>
    );
  }
}

VideoJsPlayer.propTypes = {
  onReady: PropTypes.func,
};

VideoJsPlayer.defaultProps = {
  onReady: noop,
};

export default VideoJsPlayer

Can someone please help me why the videos are not getting updated dynamically.

Here are the things i observed 1) Second when i rendervideo it's not hitting componentdidmount.

Upvotes: 1

Views: 4511

Answers (2)

Karan Bhutwala
Karan Bhutwala

Reputation: 797

I have created a react component react-video-js-player which uses videoJS internally and exposes all of videoJS APIs. It will give you videojs instance so that you can integrate various videojs plugins too.

import React, { Component } from 'react';
import VideoPlayer from 'react-video-js-player';

class VideoApp extends Component {
    player = {}
    state = {
        video: {
            src: "http://www.example.com/path/to/video.mp4",
            poster: "http://www.example.com/path/to/video_poster.jpg"
        }
    }

    onPlayerReady(player){
        console.log("Player is ready: ", player);
        this.player = player;
    }

    render() {
        return (
            <div>
                <VideoPlayer
                    src={this.state.video.src}
                    poster={this.state.video.poster}
                    onReady={this.onPlayerReady.bind(this)}
                />
            </div>
        );
    }
}
export default VideoApp;

Upvotes: 1

Hossam Mourad
Hossam Mourad

Reputation: 4639

You're initiating the video options in the componentDidMount lifecycle method which will only be triggered once when you mount the component for the first time only not in future updates of the component. So most likely the first video render is working fine but not the next ones, right?

I think you should place what is inside componentDidMount into another lifecycle method that will be triggered each time the props are changed, something like componentWillReceiveProps or componentWillUpdate.

Upvotes: 0

Related Questions