Controls plugin


See the Pen Videogular Controls Plugin by Two Fucking Developers (@2fdevs) on CodePen.


The Controls plugin is one of the most important plugins. It allows users to have full control of the video player through buttons and widgets.


If you want to autohide Videogular controls you just need to add vg-autohide and vg-autohide-time with a binding or a value of your choice.

Autohide is by default to false and vg-autohide-time works in milliseconds.


This is a list of the buttons available:

  • vg-play-pause-button: Allows to play/pause media.
  • vg-fullscreen-button: Allows to change between fullscreen and normal mode.
  • vg-mute-button: Allows to mute volume. It saves the last volume, so if you press again you will return to your last volume selected.


This is a list of the widgets available:

  • vg-time-display: Display media time values. There are three different values to display; currentTime, timeLeft or totalTime. It supports date formatting through AngularJS native filters.
  • vg-scrub-bar: Adds a bar that represents the time. Inside this bar you can add other widgets like vg-scrub-bar-current-time or vg-cuepoints.
  • vg-volume: Adds a widget to display and control the volume. This is similar to vg-scrub-bar and behaves more as a container for other widgets like vg-mute-button or vg-volume-bar.

In the next tutorials we will see how to create your custom layout and controls!


You can install with bower:

bower install videogular-controls