Creating a video plugin using videogular
0
/
2518
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 videogularnpm install videogular–themes–default
npm install videogular–controls
npm install videogular–buffering
npm install videogular–overlay–play
npm install videogular–poster
npm install videogular–ima–ads
npm install videogular–angulartics
npm install videogular–dash
Install bower for installing angularjs and its related components as shown below
npm install bower
bower install angular
bower install angular-sanitize
bower install videogular–controls
bower install videogular–buffering
bower install videogular–overlay–play
bower install videogular–poster
bower install videogular–ima–ads
bower install videogular–angulartics
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.
Comments
