如何在视频播放器之外显示 video.js 控件

Question

我想自动播放视频并在视频播放器外显示静音和全屏控制按钮。我无法实现这一点，因为为了 mute/unmute 或全屏显示视频，用户必须先与视频播放器互动。

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

这些是我的视频播放器选项：

  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
        }
      },

Answer 1

第一步是通过在 videoOptions 属性中将控件设置为 false 来隐藏视频播放器控件。

 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
    }
  },

然后在视频标签或播放器外添加 play/pause 全屏按钮，并将点击事件监听器附加到这些按钮，在我的例子中，我需要全屏、播放和静音按钮，它们可以在他们的点击监听器中调用这些功能

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

由于 auto play policy 需要用户点击事件才能正常工作，因为 pllay/fullscreen/muted 函数在点击监听器中被调用。

如何在视频播放器之外显示 video.js 控件

how to display video.js controls outside of video player

video.js