How to add quality selector option on videojs

Question

The following is my code: I need to add a quality selector in a webpage which uses videojs. I am not sure on how to use the plugins, there weren't any examples of plugins in React. The way I inserted the plugins don't work. Please help

Videojs

<script src="https://vjs.zencdn.net/7.6.6/video.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
    <script src="https://cdn.streamroot.io/videojs-hlsjs-plugin/1/stable/videojs-hlsjs-plugin.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-overlay/1.1.4/videojs-overlay.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">
    <script src="../dist/silvermine-videojs-chromecast.min.js<?php echo "?".$version; ?>"></script>


                <div class="col-sm-6">
                    <div class="video-player1">
                        <video autoplay id="example-video" class="video-js vjs-theme-fantasy custom-videojs" controls>
                        </video>
                        <script>
                            var options = {
                                html5: {
                                    hlsjsConfig: {
                                        // Put your hls.js config here
                                    }
                                },
                                controls: true,
                                techOrder: [ 'chromecast', 'html5' ], // You may have more Tech, such as Flash or HLS
                                plugins: {
                                    chromecast: {}
                                }
                            };

                            // setup beforeinitialize hook
                            videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer, hlsjsInstance) => {
                                // here you can interact with hls.js instance and/or video.js playback is initialized
                            });

                            var player = videojs('example-video', options, function() {});

                            var overlay_content = '<div class="overlay_title"><div class="wrapper"><img src="images/nologo.jpg" align="middle" class="logoVideo" id="logovideo"> <div style="padding-left:10px"><h2 id="channeltitle" style="font-size: 22px;" ></h2><h4 id="descrtitle" style="font-size: 17px;"></h4></div></div><div id="progressp" class="progress-bar"><div id="progress_channel" class="progress"></div></div>';
                            player.overlay({
                                overlays: [{
                                    start: 'useractive',
                                    content: overlay_content,
                                    end: 'userinactive',
                                    align: 'bottom'
                                }]
                            });
                            function play(url) {
                                player.pause();
                                player.src({
                                    src: url,
                                    type: 'application/x-mpegURL'
                                });
                                player.load();
                                player.play();
                                // here you can interact with hls.js instance and/or video.js playback is initialized
                            }
                        </script>

score 2 · Answer 1 · answered Aug 07 '21 at 14:59

You can try to add this plugin: https://github.com/silvermine/videojs-quality-selector

You should add these imports on top:

<link href="https://unpkg.com/@silvermine/videojs-quality-selector/dist/css/quality-selector.css" rel="stylesheet">
<script src="./path/to/video.min.js"></script>
<script src="https://unpkg.com/@silvermine/videojs-quality-selector/dist/js/silvermine-videojs-quality-selector.min.js"></script>

and then you have to add the control to playerbar in this way:

player.controlBar.addChild('QualitySelector');

score -2 · Answer 2 · answered Oct 04 '22 at 11:19

Below code is working fantastic:-

import React, { useRef, useState, useEffect, Fragment } from "react";
import videojs from "video.js";
import _ from "videojs-contrib-quality-levels";
import qualitySelector from "videojs-hls-quality-selector";
import "video.js/dist/video-js.css";

// those imports are important

const VideoPlayerHLS = () => {
  const videoRef = useRef();
  const [player, setPlayer] = useState(undefined);
  const [callFinishVideoAPI, setCallFinishVideoAPI] = useState(false);
  const [vidDuration, setVidDuration] = useState(50000);
  const videoId = "e2280eeb-4cdb-43e7-a34f-36868326b8cb";
  const thumbnailURL =
    "https://vz-a2adf92d-b24.b-cdn.net/e2280eeb-4cdb-43e7-a34f-36868326b8cb/thumbnail.jpg";
  const liveURL =
    "https://vz-b4f1e97e-483.b-cdn.net/65c65840-de66-4c27-afd0-a3b5a904b768/playlist.m3u8";
  useEffect(() => {
    if (player) {
      player.src({
        src: liveURL,
        type: "application/x-mpegURL",
        withCredentials: false
      });
      player.poster("");
      setCallFinishVideoAPI(false);
      setVidDuration(50000);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [videoId, liveURL, thumbnailURL]);

  useEffect(() => {
    if (callFinishVideoAPI) {
      //finishesVideo()
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [callFinishVideoAPI]);

  useEffect(() => {
    const videoJsOptions = {
      autoplay: false,
      preload: "auto",
      controls: true,
      poster: "",
      sources: [
        {
          src: liveURL,
          type: "application/x-mpegURL",
          withCredentials: false
        }
      ],
      html5: {
        nativeAudioTracks: true,
        nativeVideoTracks: true,
        nativeTextTracks: true
      }
    };

    const p = videojs(
      videoRef.current,
      videoJsOptions,
      function onPlayerReady() {
        // console.log('onPlayerReady');
      }
    );

    setPlayer(p);
    console.log(p.qualityLevels());

    return () => {
      if (player) player.dispose();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    if (player) {
      player.hlsQualitySelector({ displayCurrentQuality: true });
    }
  }, [player]);
  return (
    <div data-vjs-player>
      <video
        ref={videoRef}
        onLoadedMetadata={(e, px) => {
          // console.log(e.target.duration);
          setVidDuration(e.target.duration);
        }}
        onTimeUpdate={(e) => {
          if (e.target.currentTime >= vidDuration - 10) {
            setCallFinishVideoAPI(true);
          }
        }}
        className="vidPlayer video-js vjs-default-skin vjs-big-play-centered"
      ></video>
    </div>
  );
};

export default VideoPlayerHLS;

Reference:-Video Quality Changer Videojs

How to add quality selector option on videojs

2 Answers2