Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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;
                displayCurrentQuality: true,

    }, [player])

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

    if (typeof window !== "undefined" && typeof window.navigator !== 'undefined') {
            return <VideoPlayer
                onReady={(p) => onPlayerReady(p)}

    return (
            Hello World
export default Index

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

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:7

github_iconTop GitHub Comments

AbdelazizEidcommented, Nov 1, 2020

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) {
  }, [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');
    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>

export default VideoPlayer;
DipeshGodcommented, Jun 3, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

From React to Next.js
Create a Next.js App · Navigate Between Pages · Assets, Metadata, and CSS · Pre-rendering and Data Fetching · Dynamic Routes · API...
Read more >
Next JS vs React: Which Framework to Choose for Front-end?
Next JS offers server-side rendering (SSR), whereas Create React App offers client-side rendering, improving the application performance. Next. ...
Read more >
Next.js vs. React: The Difference & Best Frontend Framework
React.js is a JS library, and Next.js is a framework based on React. Sometimes it makes more sense to use React than Next.js...
Read more >
Next.js vs React: What are the differences? - Imaginary Cloud
Next.js is an open-source framework designed to work with React, created by Vercel. It claims to be the Web's Software Development Kit with...
Read more >
Next.js vs React: Which Framework Is Better For your Front-end?
Every Next.js developer has to know React, every React developer has to know JavaScript, as those are pieces built on top of each...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found