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

Posted 2023-02-25

【中文标题】如何在视频播放器之外显示 video.js 控件

【英文标题】：how to display video.js controls outside of video player

【发布时间】：2020-12-08 18:36:29

【问题描述】：

我想自动播放视频并在视频播放器之外显示静音和全屏控制按钮。我无法做到这一点，因为为了使视频静音/取消静音或全屏播放，用户必须先与视频播放器进行交互。

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
        
      ,

【参考方案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
    
  ,

然后在视频标签或播放器之外添加播放/暂停全屏按钮，并将点击事件侦听器附加到这些按钮，在我的情况下，我需要全屏、播放和静音按钮，它们可以在他们的点击侦听器中调用这些函数

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 函数。