I'am try to convert my code bellow into Reactjs. I use this code bellow to embed THEOplayer to my website, as long as i know we can use "ref" to replace the document.querySelector('.classname') instead to target particular DOM to change or modifiying it but i'm still confused and getting error, what is the best practice to change my code bellow.

var playerConfig = {
    "libraryLocation": "//cdn.theoplayer/dash/theoplayer/",
    ui: {
        fluid: true
    },
};

var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);

player.source = {
    sources : [{
        src : '//cdn.theoplayer/video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer/video/star_wars_episode_vii-the_force_awakens_official_ic-con_2015_reel_(2015)/index.m3u8
        type : 'application/x-mpegurl' // sets type to HLS
    }],
    textTracks : [{
        default: true, //optional
        kind : 'subtitles',
        src : 'example.srt',
        srclang : 'en'
    }]
};


player.addEventListener('sourcechange', function() {
    player.removeEventListener('playing', firstplay);
    player.addEventListener('playing', firstplay);
});

I'am try to convert my code bellow into Reactjs. I use this code bellow to embed THEOplayer to my website, as long as i know we can use "ref" to replace the document.querySelector('.classname') instead to target particular DOM to change or modifiying it but i'm still confused and getting error, what is the best practice to change my code bellow.

var playerConfig = {
    "libraryLocation": "//cdn.theoplayer./dash/theoplayer/",
    ui: {
        fluid: true
    },
};

var element = document.querySelector('.video-container');
var player = new THEOplayer.Player(element, playerConfig);

player.source = {
    sources : [{
        src : '//cdn.theoplayer./video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer./video/star_wars_episode_vii-the_force_awakens_official_ic-con_2015_reel_(2015)/index.m3u8
        type : 'application/x-mpegurl' // sets type to HLS
    }],
    textTracks : [{
        default: true, //optional
        kind : 'subtitles',
        src : 'example.srt',
        srclang : 'en'
    }]
};


player.addEventListener('sourcechange', function() {
    player.removeEventListener('playing', firstplay);
    player.addEventListener('playing', firstplay);
});

• javascript
• reactjs

• 1 Please, provide at least your react code that illustrates your attempt and the error that you get (or make a code snippet that illustrates your problem) – Limbo Commented Sep 25, 2018 at 7:42

1 Answer 1

You could simple write a react ponent and add your custom event listeners in ponentDidMount method

const playerConfig = {
    "libraryLocation": "//cdn.theoplayer./dash/theoplayer/",
    ui: {
        fluid: true
    },
};

class App extends React.Component {
    ponentDidMount() {
        const player = this.player;
        player.addEventListener('sourcechange',() => {
            player.removeEventListener('playing', this.firstplay);
            player.addEventListener('playing', this.firstplay);
        });
        this.playerSrc = new THEOplayer.Player(player, playerConfig);

        this.playerSrc.source = {
            sources : [{
                src : '//cdn.theoplayer./video/big_buck_bunny/big_buck_bunny.m3u8', // sets HLS source //  //cdn.theoplayer./video/star_wars_episode_vii-the_force_awakens_official_ic-con_2015_reel_(2015)/index.m3u8
                type : 'application/x-mpegurl' // sets type to HLS
            }],
            textTracks : [{
                default: true, //optional
                kind : 'subtitles',
                src : 'example.srt',
                srclang : 'en'
            }]
        };

    }
    render() {
       return <div className={video-container} ref={(ref) => this.player = ref}/>
    }
}