videojsでビデオ停止時にcontrolsを非表示にする

controlsを非表示にできない

video.jsはビデオが停止すると、コントロールバーが表示されるようになっている。それを消したいと思った。

ドキュメントを読むと、controlsというAPIがあるようだ。
https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#controls-controls-

script.js

var hogePlayer;
videojs("example_video_1", {}, function(){
  hogePlayer = this;
});

こんなプレイヤーを想定するとして、

script.js

hogePlayer.controls(false);

こう書いても、コントロールバーは消えなかった。

CSSでdisplay:noneする

script.js

if(!hogePlayer.controls()){
    hogePlayer.controlsBar.el().className = v.controlBar.el().className + " vjs-controls-disabled";
}

style.css

.vjs-controls-disabled{
    display: none !important;
}

上のように書いて、コントロールバーを扱うCSSを非表示させるとできた。
・参考ドキュメント
https://github.com/videojs/video.js/blob/stable/docs/guides/setup.md
https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md#el