Introduction

Videogular is an HTML5 video player for AngularJS. We’re developing Videogular focusing on HTML5 features and mobile, so we don’t support Flash, however you can develop a plugin and give fallback support pretty easily.

This is a small project leaded by (literally) Two Fucking Developers and there are other video players that maybe fits better in your project. However, we highly recommend Videogular if you’re using AngularJS for your project because it provides a bindable API.

How it works?

Videogular is a wrapper over the HTML5 video tag, so you just could add whatever you want. To create your player you write plain HTML so it’s highly intuitive to customize your video player. Videogular’s API provides a few special tags and attributes to help you in this process. This provides a very powerful, but simple to use solution, for everybody.

Install

We recommend to use Node.js and NPM to install Videogular.

Additionally, you can install a theme and several plugins:

Alternatively you can also use Bower or you also have the public repositories at Github where you will find all the versions available as tags to download manually.

Install Videogular with Bower:

Install Videogular theme with Bower:

With Videogular core and a theme you can start using it but it’s recommended to install also a few plugins that could be handful for you:

Now that you have installed Videogular files we’re going to add AngularJS and AngularJS Sanitize, the two major dependencies. Without those packages will not run, sorry.

Install AngularJS and AngularJS Sanitize with bower:

First blood!

Ok, let’s get our hands dirty!

First things first, put the JS files at the end of your body in this order: AngularJS, AngularJS Sanitize, Videogular and Videogular Plugins.

Now create a JS file called “main.js” and put the script at the end of the body, below the other scripts.

Should be something like this:

Now that you have loaded all the necessary scripts we can start coding!

AngularJS code

Open your “main.js” file and add this code:

If you already know AngularJS you can see that the code is pretty basic.

We’ve added all the modules at our app called “myApp” and we created a controller called “HomeCtrl”.

Inside this controller we created a bindable object called config that haves basically all that we need to initialize our player. Of course, this is only a recommended structure, you can build your own configs as you wish since you’re going to pass bindable variables.

The only objects that you must follow a convention is sources and tracks:

  • Sources: must be an array of objects with two properties (src and type) in order of preference.
  • Tracks: must be an array of objects with five properties (src, kind, srclang, label and default).

This objects and property names are the same to the HTML5 spec so it should pretty easy to find how they work.

Apart from that think that you can remove this.config and have this.sources, this.tracks, this.theme and this.poster and it would also work, so it would be easy for you to create your config as you wish.

Also, you can see that sources are created with $sce.trustAsResourceUrl, this is made to warn AngularJS that our videos are trustful files and there’s no problem to load them.

Create your HTML

Once you’ve added all the dependencies in body’s HTML you can start writing the special tags provided by the Videogular API.

But first we need to instantiate our application and controller:

To start using Videogular, just create a videogular tag like this one:

The vg-media tag will create a video with the source and tracks that we have at our bindable variables that we created in our controller, in this case, config.sources and config.tracks. The theme will be added at the end of your head tag.

Now we can add the plugins below our vg-media tag.

And that’s all. Pretty easy, right?

Now we’re going to see how we can create a good container with CSS.

Creating a responsive container

Videogular works always as a responsive video player. Videogular will set its width and height to 100%, this will give you full control of how you want to set Videogular’s size.

For example this is how you can make a responsive container for a 16:9 aspect ratio.

You only need to add videogular-container class to your div and we’re done!

Congratulations! You’ve been made your first Videogular player!

If you want to learn more about Videogular’s API you can take a look to the Examples page or the docs.