CODEWITHSUNDEEP
video.js
Viraj Singh
Viraj Singh

Reputation: 2358

how to display video.js controls outside of video player

I want to auto play a video and show mute and fullscreen control buttons outside the video player. I'm not able to achieve this because in order to mute/unmute or fullscreen the video the user has to interact with the video player first.

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes


these are my videoplayer options: 
  videoOptions: {
        // video player options
        autoplay: true,
        muted: true, // muted: true is required for autoplay
        loop: true,
        controls: true,
        sources: [],
        overlays: [],
        controlBar: {
          playToggle: false,
          captionsButton: false,
          chaptersButton: false,
          subtitlesButton: false,
          remainingTimeDisplay: false,
          progressControl: {
            seekBar: false
          },
          fullscreenToggle: false,
          playbackRateMenuButton: false
        }
      },

Upvotes: 1

Views: 1253

Answers (1)

Viraj Singh
Viraj Singh

Reputation: 2358

First step is to hide the video player controls by setting controls to false in videoOptions prop.

 videoOptions: {
    // video player options
    autoplay: true,
    muted: true, // muted: true is required for autoplay
    loop: false,
    controls: false, // showing controls in replay
    sources: [],
    overlays: [],
    fullscreen: false,
    controlBar: {
      playToggle: true,
      captionsButton: false,
      chaptersButton: false,
      subtitlesButton: false,
      remainingTimeDisplay: true,
      volumePanel: false,
      pictureInPictureToggle: false,
      progressControl: {
        seekBar: true
      },
      fullscreenToggle: false,
      playbackRateMenuButton: false
    }
  },

then add buttons for play/pause fullscreen outside the video tag or player and attach click event listners to these buttons and in my case I needed fullscreen, play and mute button which can call these functions in their click listenrs

this.player.requestFullscreen(); // request fullscreen
this.player.exitFullscreen(); // exit fullscreen


this.player().play(); // play button



this.player.muted(value); // mute button, value can be true or false

due to the auto play policy a user click event is required for these to work which is fullfiled as pllay/fullscreen/muted functions are called inside click listners.

Upvotes: 1

Related Questions