How does it work with React ? (specifically Next.js)

[davidevaliante]

what i have tried so far :

import React, { Fragment, useState, useEffect } from 'react'
import videojsqualityselector from 'videojs-hls-quality-selector'
import 'videojs-contrib-quality-levels'
import dynamic from 'next/dynamic'

// react-video-js-player import
const VideoPlayer = dynamic(
    () => import('react-video-js-player'), { ssr: false }
)

const Index = (props) => {

    const [player, setPlayer] = useState(undefined)

    useEffect(() => {
        // react hook when player is ready
        if (player !== undefined) {
            player.hlsQualitySelector = videojsqualityselector;
            player.hlsQualitySelector({
                displayCurrentQuality: true,
            });
        }

    }, [player])

    const onPlayerReady = p => {
       // react-video-js-player states this returns a videojs instance
        console.log("Player is ready: ", p);
        setPlayer(p)
    }

    if (typeof window !== "undefined" && typeof window.navigator !== 'undefined') {
            return <VideoPlayer
                autoplay
                muted
                onReady={(p) => onPlayerReady(p)}
                bigPlayButton={false}
                controls={true}
                src={links['1080']}
                width="720"
                height="420"
            />
    }

    return (
        <Fragment>
            Hello World
        </Fragment>
    )
}
export default Index

The player shows and starts playing but it only has the default controls

[jacksun0124]

Have you figure out how to use it in react? I want to ask same question.

[davidevaliante]

Have you figure out how to use it in react? I want to ask same question.

@jacksun0124 yeah i kind of did

import React, { useRef, useState, useEffect } from 'react';
import videojs from 'video.js'
import 'video.js/dist/video-js.css';
// those imports are important
import qualitySelector from 'videojs-hls-quality-selector';
import qualityLevels from 'videojs-contrib-quality-levels'

const LivePlayer = ({ videoLink }) => {

    const videoRef = useRef()
    const [player, setPlayer] = useState(undefined)

    useEffect(() => {
        const videoJsOptions = {
            autoplay: false,
            controls: true,
            fluid: true,
            muted: true,
            responsive: true,
            sources: [{
                src: videoLink,
            }],
        }

        videojs.registerPlugin('hlsQualitySelector', qualitySelector)
        const p = videojs(videoRef.current, videoJsOptions, function onPlayerReaady() {
            console.log('onPlayerReady')
        })
        setPlayer(p)
        return () => {
            if (player) player.dispose()
        };
    }, [])

    useEffect(() => {
        if (player) player.hlsQualitySelector({ displayCurrentQuality: true })
    }, [player])

    return (
        <div data-vjs-player>
                <video ref={videoRef} className="video-js"></video>
        </div>
    );
};

[kobaltz]

I did run into an issue recently where the quality selector no longer worked. I ended up having to do this.

import contribQualityLevels from 'videojs-contrib-quality-levels'

videojs.registerPlugin('qualityLevels', contribQualityLevels)

[Ferdous-Jahan]

@kobaltz can you please share the full implementation of quality selector?

[frankrod]

I was having same issues if someone is looking for code or an answer this is how I got it work:

import 'videojs-contrib-quality-levels';
import 'videojs-hls-quality-selector';

and in my useEffect hook

useEffect(() => {
    const player = videojs(
      playerRef.current,
      {
        controls: true
      },
      () => {
        player.src(videoSrc);
        player.hlsQualitySelector({
          displayCurrentQuality: true
        });
      }
    );

It is important to call your player.hlsQualitySelector after you set player.src

[AbdelazizEid]

This worked for me

import React, { useRef, useState, useEffect } from 'react';
import videojs from 'video.js';
// those imports are important
import qualitySelector from 'videojs-hls-quality-selector';
import qualityLevels from 'videojs-contrib-quality-levels';

const VideoPlayer = ({ liveURL }) => {

  const videoRef = useRef();
  const [player, setPlayer] = useState(undefined);

  useEffect(() => {
    if (player) {
      player.src([liveURL]);
    }
  }, [liveURL]);

  useEffect(() => {
    const videoJsOptions = {
      preload: 'auto',
      autoplay: 'any',
      controls: true,
      fluid: true,
      responsive: true,
      sources: [
        {
          src: liveURL,
        },
      ],
    };

    videojs.registerPlugin('hlsQualitySelector', qualitySelector);
    const p = videojs(videoRef.current, videoJsOptions, function onPlayerReaady() {
      // console.log('onPlayerReady');
    });
    setPlayer(p);
    return () => {
      if (player) player.dispose();
    };
  }, []);

  useEffect(() => {
    if (player) player.hlsQualitySelector({ displayCurrentQuality: true });
  }, [player]);
  return (
    <div data-vjs-player>
      <video ref={videoRef} className="video-js vjs-default-skin vjs-big-play-centered"></video>
    </div>
  );
};

export default VideoPlayer;

[DipeshGod]

@AbdelazizEid can you share your package.json or the version of videojs, videojs-hls-quality-selector, videojs-contrib-quality-levels