Creating a video plugin using videogular

0 / 2518
Creating a video plugin using videogular

Intro:- Creating video plugin using videogular – the HTML5 video player for angularjs

What is videogular ?

Videogular is an angularjs extension written and maintained by two fucking developers. It is based on angularjs and since it caters to video, its called videogular. In this blog, we will show how this extension can be used to create playlist of videos hosted on site and also how it can be used to create youtube video plugin. Familiarity with angularjs is mandatory for this. You can get started with angularjs here. Tools needed for this : nodejs. Download here. Once downloaded, install videogular and its related plugins using the commands shown below:-   npm install videogular  
npm install videogularthemesdefault
npm install videogularcontrols
npm install videogularbuffering
npm install videogularoverlayplay
npm install videogularposter
npm install videogularimaads
npm install videogularangulartics
npm install videogulardash
Install bower for installing angularjs and its related components as shown below
npm install bower
bower install angular
bower install angular-sanitize
bower install videogularcontrols
bower install videogularbuffering
bower install videogularoverlayplay
bower install videogularposter
bower install videogularimaads
bower install videogularangulartics
Once this is done, we can have all the libs in bower_components folder of the project directory included in the html markup.
vg-media takes care of creating video by specifying the media type/sources. Rest of the vg-tags are self explanatory from their names.
Do not forget to include angular and videogular libs as shown below in the html markup
Those who know angularjs can very well relate to the above code as its self explanatory. Bind the markup with angularjs module (app) and controller. All vg- related tags are taken care of by the plugins that are installed using the commands shown above and are also included as shown above.
Below is the app.js showing the videogularapp and VideoCtrl definition
ID provided is not a Gistpen repo.
In the above code, we specify the video player config params, bind event to video start/end so that the next video in the playlist is played automatically when current is done.
The above code shows how videos hosted on site can be played as a playlist.
This can be further extended to play youtube videos by creating custom HTML5 player for youtube. The modified markup to achieve the same is shown below followed by its controller business logic
vg-youtube is for specifying that the source of video is youtube. Controller business logic for the youtube HTML5 player is below:
The logic of youtube player controller is same as previous case where videos hosted on site were played using videogular, only the source URLs are from youtube.
Complete source code for above 2 players is present here for download.



An avid reader, responsible for generating creative content ideas for His interests include algorithms and programming languages. Blogging is a hobby and passion.

Related Posts