Nuevo videojs player not loading

Question

I am using nuevo plugin for videojs in React js app. I implemented the code by referring the documentation.

The problem is nuevoReady event is never fired and player source is never set. nuevoReady function gives a callback function, inside this function player source is set.

If I try to set source outside of nuevoReady event then I get the following error

Uncaught TypeError: player.setSource is not a function

when I log the player instance in console, I found that there is no setSource function available

Update

As answered by @misterben, initializing the nuevo outside the nuevoReady event did the trick. But just after I am not able to change the player source programmatically. Doing so gives the following error

_player.changeSource is not a function

Player Instance

any: ƒ any()
bigPlayButton: BigPlayButton {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_106', …}
boundApplyInitTime_: ƒ (e)
boundDocumentFullscreenChange_: ƒ (e)
boundFullWindowOnEscKey_: ƒ (e)
boundHandleTechClick_: ƒ (e)
boundHandleTechDoubleClick_: ƒ (e)
boundHandleTechTap_: ƒ (e)
boundHandleTechTouchEnd_: ƒ (e)
boundHandleTechTouchMove_: ƒ (e)
boundHandleTechTouchStart_: ƒ (e)
boundUpdateCurrentBreakpoint_: ƒ (e)
boundUpdateStyleEl_: ƒ (e)
breakpoint_: ""
breakpoints_: {tiny: 210, xsmall: 320, small: 425, medium: 768, large: 1440, …}
cache_: {currentTime: 0, initTime: 0, inactivityTimeout: 2000, duration: NaN, lastVolume: 1, …}
changingSrc_: false
childIndex_: null
childNameIndex_: null
children_: null
clearingTimersOnDispose_: false
controlBar: ControlBar {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_130', …}
controls_: true
debugEnabled_: false
el_: null
errorDisplay: ErrorDisplay {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_539', …}
eventBusEl_: null
eventedCallbacks: [ƒ]
fill_: false
fluid_: true
fsApi_: {prefixed: false, requestFullscreen: 'requestFullscreen', exitFullscreen: 'exitFullscreen', fullscreenElement: 'fullscreenElement', fullscreenEnabled: 'fullscreenEnabled', …}
hasStarted_: false
id_: "video-player"
isAudio_: false
isDisposed_: true
isFullscreen_: false
isPosterFromTech_: false
isReady_: true
language_: "en"
languages_: {en: {…}}
liveTracker: LiveTracker {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_118', …}
loadingSpinner: LoadingSpinner {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_101', …}
log: ƒ log()
mediaLoader: MediaLoader {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_6', …}
middleware_: []
name_: null
namedRafs_: Map(0) {size: 0}
off: ƒ off$1(targetOrType, typeOrListener, listener)
on: ƒ on()
one: ƒ one()
options_: {techOrder: Array(1), html5: {…}, inactivityTimeout: 2000, playbackRates: Array(0), liveui: false, …}
parentComponent_: null
playCallbacks_: []
playTerminatedQueue_: []
playerElIngest_: false
player_: null
posterImage: PosterImage {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_80', …}
poster_: ""
queuedCallbacks_: []
rafIds_: Set(0) {size: 0}
resizeManager: ResizeManager {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_565', …}
responsive_: false
scrubbing_: false
setIntervalIds_: Set(0) {size: 0}
setState: ƒ setState(stateUpdates)
setTimeoutIds_: Set(0) {size: 0}
state: {}
styleEl_: null
tag: null
tagAttributes: {playsinline: true, preload: 'auto', autoplay: true, controls: true, class: 'video-js vjs-fluid', …}
techName_: "Html5"
tech_: Html5 {player_: null, isDisposed_: true, parentComponent_: null, options_: null, id_: 'no_player_component_12', …}
textTrackDisplay: TextTrackDisplay {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_92', …}
textTrackSettings: TextTrackSettings {player_: null, isDisposed_: true, parentComponent_: null, options_: {…}, id_: 'video-player_component_545', …}
trigger: ƒ trigger$1(event, hash)
userActive_: true
userActivity_: true
usingNativeControls_: false

My Code

import React, {useState, useEffect, useRef} from 'react';
import videojs from "video.js";
import './resource/videojs.min.css';

const Player = ({options}) => {

    const videoRef = React.useRef(null);
    const playerRef = useRef(null);

    useEffect(() => {

        if (!playerRef.current) {

            const videoElement = videoRef.current;
            if (!videoElement) return;

            const player = playerRef.current = videojs("video-player");

            console.log("before on", player)

            player.nuevo({shareMenu: false});

            player.on('nuevoReady', function () {
                player.setSource({
                    src: 'http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8',
                    type: 'application/x-mpegURL'
                })

            });

        } else {

            // you can update player here [update player through props]
            const player = playerRef.current;
            player.changeSource({
                    src: 'http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8',
                    type: 'application/x-mpegURL'
                })

            });
            player.poster(options.poster);
            player.currentTime(options.currentTime);
        }
    }, [options, videoRef])

    // Dispose the Video.js player when the functional component unmounts
    React.useEffect(() => {
        const player = playerRef.current;

        return () => {
            if (player) {
                player.dispose();
                playerRef.current = null;
            }
        };
    }, [playerRef]);

    return (
        <div>
            <video
                ref={videoRef}
                id="video-player"
                className="video-js vjs-fluid"
                controls
                autoPlay
                preload="auto"
                playsInline>
            </video>
        </div>
    );
};

export default Player;

Answer 1

It looks like you are only trying to initialise the plugin (player.nuevo({shareMenu: false})) on an event listener for an event that would be added by that plugin. You'd want that line outsode of the listener.