[Vuejs]-How to add gear icon (settings) to video.js player

by

0👍

These are the things you should check during the integration of video.js with quality controllers. Here i have attach the code for Vue.js as well.

Resolution display in video js enter image description here

//imports:
import "videojs-contrib-quality-levels"; // Import quality levels plugin
import "@mycujoo/videojs-hls-quality-selector"; // quality or resoultion menu

//Mounted time code:
    this.player = videojs(this.$refs.videoPlayer, this.options, () => {
      // Initialize the quality levels plugin
      // this.player.qualityLevels();
      this.player.log("onPlayerReady", this);
      console.log(this.player);
    });
    this.player.hlsQualitySelector({
      displayCurrentQuality: true,
    });
  },

// Option variable
{
        autoplay: true,
        controls: true,
        responsive: true,
        preload: true,
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        html5: {
          hls: {
            // withCredentials: true,
            overrideNative: true,
          },
        },
        sources: [
          {
            // withCredentials: true,
            src: `test.m3u8`,
            type: "application/x-mpegURL",
          },
        ],
        plugins: {
          qualityLevels: {},
        },
      }

Leave a comment