Description

In Videogular 1.2.4 we introduced a new feature to update your media sources from any plugin, controller or any place with access to the API. In this tutorial we want to cover how to take advantage of this new cool feature (I don’t know why we didn’t added this before) to create a plugin similar to what Youtube haves now.

Youtube next video feature

In this tutorial we will use the Angular SVG Round Progressbar directive by Kristiyan Kostadinov to create our plugin. It’s very easy to use and highly customizable so I totally recommend you 🙂

You can see a demo in this link: Videogular “Next Video” Demo

To browse the code we’ve been created a Github repository: Videogular “Next Video” Plugin Repository

Preparing your workspace

Every developer has its preferred workspace, personally I follow something similar to AngularJS Yeoman Generator but feel free to use whatever you want.

This is my suggested workspace for this tutorial. Create the next tree of files and folders:

When you’ve created all the files and folders just paste this in you bower.json and install all the dependencies.

Now we can start creating our code!

Create a basic HTML

Open index.html and add your scripts and CSS files, we will add the code later. After that add the HTML we will use for Videogular:

You will notice that we’re using a couple of plugins (vg-controls, vg-poster and the new vg-next-video plugin) but the most important thing here is that vg-media is empty. In releases before 1.2.4 we can’t do that because the player can’t initialize without a media file but now we can add the media files from wherever we want!

Now we can just create our app.js, which basically will have the module initialization:

The last thing we need to start coding is our data model. Open media-files.json and paste this JSON:

In this plugin example we’re just setting our media files but you can also add a title, description, tracks or whatever you want. Now we’re ready to start our plugin!

Creating your $http service

In the last step we created the media-files.json file so now we are going to create the service that should load and return the data to our plugin.

This is pretty basic, we just need a service to parse the data. Open vg-next-video-service.js and paste this code:

This service is really simple, we’ve been created and returned a promise. When our data is loaded and parsed (we’ve used $sce to create trustful URLs) we just resolve the promise and that’s all.

Now comes the fan part! The directive!

Develop your Next Video plugin

Open vg-next-video.js and let’s start our plugin!

First, create the module and add the module dependencies:

Also, we need a template. I like to have my template cached by default and you can do that by using Angular’s $templateCache service. Because we need to have it from start we just add in the .run() method:

The template is pretty basic.

We have an ng-if to show the plugin only if the video its completed. Inside our container we have two elements, one with the round-progress directive and another one to cancel the timer just in case the user don’t want to jump to the next video.

Now we can create the directive. We will add the methods later, let’s see the directive definition object:

A quick explanation for this DDO:

  • Restrict to element.
  • Require “^videogular” to grab the API provided by the core of Videogular.
  • TemplateUrl as a function. This is tricky at lets us to have a custom template with an attribute vg-template on the vg-next-video element. This is a common feature of all Videogular plugins but you can skip this if you want.
  • Isolated scope with two variables: vgSrc with the url of our media-files.json file and vgTime to set how many seconds we want to wait to jump to the next video.
  • ControllerAs, just because is what you should use. If we don’t use “controllerAs” syntax we will have problems with our ng-if since it creates a new scope. Remember, you should use “controllerAs” always.
  • Controller now is empty, we will focus on it soon.
  • Link function to grab the Videogular’s API.

Now that we have set up our directive we can focus on what’s more important. The directive’s controller!

This is how it looks our controller:

So let’s try to explain each block of code.

Initialization:

We just create a few variables here. We also set 5000 miliseconds as default value for vgTime.

Load data:

the vgNextVideoService will start loading the data. When it’s loaded we will set the first video in our API with $scope.API.sources = this.sources[this.currentVideo]; and that’s all, Videogular now can start playing the first video. In case that the data is not loaded we will send an error.

Watch for video complete:

To show the video we will watch the $scope.API.isCompleted property to change. When it’s true we can show the plugin and start the timer that will count until it’s completed.

Jumping to the next video:

This is the heart of this plugin. We will count until we reach the time set at vgTime and then we can set the new source, initialize the variables and set autoPlay to true to play immediately the new video.

Canceling the timer:

Finally we can add a method to let the user cancel the timer.

And that’s all!

Add some CSS styles

Now that we have the implementation ready we just need to add a few CSS files. I’ve used SASS but if you prefer you can use plain CSS.

This is the plugin SASS file:

And the main.scss file:

Conclusion

As we saw with this new feature it’s pretty easy to create your own plugins to handle playlists. In this example we’re changing directly the video source but if you like you can navigate to another URL as Youtube does.

With this technique you can create also similar plugins like “related videos”, “playlist videos” or “choose your own adventure”. I hope you liked it and you can start building nice interactive videos in your projects!