Ability to use in React?

[NuttaponTamburanavit]

I get error 'getComponent is not function' when I tried import with videoJs

And I don't want to use global script in html.

Do you have example for React?

[brandonsireland]

I found a workaround for my usecase. `

    import React, { Component } from 'react';
    import classes from './VideoPlayer.scss';
    const videojs = require('video.js').default;

    // Styles
    import './videojs-resolution-switcher.css'
    require('!style-loader!css-loader!./videojs-resolution-switcher.css');
    import 'video.js/dist/video-js.css'
    require('!style-loader!css-loader!video.js/dist/video-js.css');

    import demoVideo from '../../assets/demo/cow.mp4'; 

    class VideoPlayer extends Component {
        state = {
            sources: [
                {
                    src: demoVideo,
                    type: 'video/mp4',
                    label: '240p',
                },
                {
                    src: demoVideo,
                    type: 'video/mp4',
                    label: '480p',
                },
                {
                    src: demoVideo,
                    type: 'video/mp4',
                    label: '720p',
                },
                {
                    src: demoVideo,
                    type: 'video/mp4',
                    label: '1080p',
                },
                {
                    src: demoVideo,
                    type: 'video/mp4',
                    label: '2160p',
                }
            ]
        };

        componentDidMount() {
            // Instantiate resolution switcher
            if(window) window.videojs = videojs;
            require('./videojs-resolution-switcher')

            // instantiate Video.js
            this.player = videojs(
                this.videoNode, {
                    plugins: {
                        videoJsResolutionSwitcher: {
                            default: '480p',
                            dynamicLabel: true
                        },
                    },
                    ...this.props
                },() => {
                    let player = this.player;
                    player.updateSrc(this.state.sources)
                    player.on('resolutionchange', function() {
                        console.info('Source changed to %s', player.src());
                    });
                console.log('onPlayerReady', this)
            });
        };

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

        render() {
            return (
                <div className={ classes.VideoPlayer } >
                    <div data-vjs-player>
                        <video
                        {...this.props}
                            ref={ node => this.videoNode = node }
                            src={ demoVideo }
                            className='video-js vjs-16-9 vjs-big-play-centered'>
                        </video> 
                    </div> 
                </div>
            )
        }

    };

    export default VideoPlayer; 

` just to note that I'm using css-loader as well as style-loader in my Webpack Config for bringing in the CSS. Also I removed the onPlayerReady function from instantiation and just used an anonymous function which actually loaded the plugin correctly.