Videogular 1.0.0

In this migration guide to Videogular 1.0.0 you will see how to adapt your code to the breaking changes that has been introduced. Nothing to worry about it, you will see that you don’t need to change your entire application, probably you will have enough by changing only your templates.

This changes have been done to offer a clearer HTML API to designers and non-developers. Additionally, there are also a few new features like the new Videogular Analytics PluginvgConfig (http config loading) and vgPlaysInline (to disable native fullscreen, but supports fullscreen inside browser).

Developers also will note that now the project haves a better structure and unit tests. Each directive haves its own JS file and in the future we plan to add E2E tests to allow testing in mobile devices.

Breaking changes

As I said before, Videogular 1.0.0 has been focused in to provide a clearer API, so here’s a list of the changes in the HTML API:

  • All the Videogular callbacks now must pass parameters. For example: vg-player-ready=”onPlayerReady” now is vg-player-ready=”onPlayerReady($API)”. Full list of new callbacks:
    • vg-player-ready=”onPlayerReady($API)”
    • vg-complete=”onCompleteVideo()”
    • vg-error=”onError($event)”
    • vg-update-time=”onUpdateTime($currentTime, $duration)”
    • vg-update-volume=”onUpdateVolume($volume)”
    • vg-update-state=”onUpdateState($state)”
  • vg-autoplay attribute now has been changed to vg-auto-play.
  • <vg-video> and <vg-audio> has been merged into <vg-media>.
  • <vg-timedisplay> has been changed to <vg-time-display>.
  • <vg-scrubBar> has been changed to <vg-scrub-bar>.
  • <vg-scrubbarcurrenttime> has been changed to <vg-scrub-bar-current-time>.
  • <vg-mutebutton> has been changed to <vg-mute-button>.
  • <vg-volumebar> has been changed to <vg-volume-bar>.
  • <vg-fullscreenButton> has been changed to <vg-fullscreen-button>.
  • <vg-poster-image> has been changed to <vg-poster>.
  • The plugins have been changed the filename from plugin-name.js to vg-plugin-name.js. For example: poster.js now is vg-poster.js
  • The templates have been removed and now are embedded in the JS with $templateCache(). You can set your custom templates through vg-template attribute.
  • Internal times are now managed as miliseconds instead of Dates.
  • Changed fullscreen polyfill to a service.

And that’s all!

As you can see, there are not really “breaking changes”, just remember to update all your templates if you’re upgrading to Videogular 1.0.0.

In case that you have used Videogular times, change everything from Date objects to miliseconds, much clearer and easier to make operations.

Finally, if you have been called to the fullscreen polyfill inside Videogular, just change this:

To this new injectable service:

This is the full list of methods and properties of vgFullscreen (docs).

New Features

So, ok… now I know how I need to update my code to make it work with Videogular 1.0.0. But is it worth it? Well, hell yeah!

Take a look to the new features and see what you can do with the new release.


This is one of the biggest new features and it allows you to create a Videogular player without the need of developing a single line of AngularJS code!

In case that you only want a video player in your website or application, you can use Videogular by simply pointing to a JSON file with a specific structure. So now, instead of this HTML:

You can do something like this:

Can you smell the flavor of Web Components here? 🙂

Videogular with vg-config will load the JSON file (through http, no REST support… yet) for you and then it will populate and create all the bindings automagically. You only need to provide a JSON file with the following format:



The fullscreen polyfill has been entirely rewritten and we’ve been also added a new feature to play videos in fullscreen without native fullscreen. That could seem weird, but it haves sense if you want to have your custom skin or not loose the advertisement clicks when you’re in fullscreen in a mobile device.

When vgPlaysInline is true, Videogular will deactivate the native fullscreen and will try to fill the document and set its index to the highest possible. To activate this feature just add vgPlaysInline to the Videogular tag:

Videogular Analytics Plugin

We recommend you to take a look to the analytics plugin example to the analytics plugin docs.

Demo files

In case that you want to inspire yourself, just take a look to the demo website and check out the code at Github.