Videogular is a wrapper for the video element of HTML5, which makes it possible to add functionality in
Videogular is a wrapper for the video element of HTML5, which makes it possible to add functionality in the form of AngularJs directives as they are needed.
What is it for? The video element of HTML5 itself only plays a video, but thanks to videogular a tailored video player can be built on that element, containing what is needed for the functionality expected. For example, if small video files are served, it is possible to create a video player without the option “full screen”.
What are its advantages?
- It is possible to create a tailored video player, without extra elements.
- It is made up of directives, so there is access to the HTML of each component and it is possible to give it a style in keeping with our site.
- It is extensible, so whatever is missing can be created with some knowledge of angular.
How is it installed?
Videogular can be installed in three simple steps (if NodeJs and Bower are already installed, only step 3 is needed).
- Download and install NodeJs (it comes with a package manager called npm, which is necessary for the next step).
- Install Bower by means of npm (preferably with the flag ‘global’) with the command: npm install bower -g.
- Install videogular in your project by means of bower with the command: bower install videogular.
It is advisable to install some directives for the basic management of the video player as well as the default theme to give a style to the video player: all this can be done through bower.
bower install videogular-themes-default bower install videogular-controls bower install videogular-buffering bower install videogular-overlay-play bower install videogular-poster
Use example: the finished code of the site we are going to develop is located in this repository of GitHub, ready to be downloaded and executed. For this use example, we are going to create a site that uploads a video file and shows it with the most basic videogular player, and then we are going to add further functionality.
'use strict';
angular.module('myApp',
[
'ngSanitize',
'com.2fdevs.videogular'
]
)
This is the main module of the application on which we are going to build our videogular player. As you will see, only two dependencies are needed for the minimum player, ngSanitize and videogular itself.
angular.module('app')
.controller('VideogularController', function ($scope, $sce) {
$scope.config = {
sources: [
{src: $sce.trustAsResourceUrl('http://static.videogular.com/assets/videos/videogular.mp4'), type: 'video/mp4'}
],
useNativeControls: true,
style:'http://www.videogular.com/styles/themes/default/latest/videogular.css'
}
})
In this controller, we have created a config object to be able to manage the setting parameters that videogular needs to operate. As you will see, now it needs only three, but as we use more plugins, it will likely be increasingly necessary to focus our videogular configuration on only one site.
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-sanitize.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="VideogularController.js"></script>
</head>
<body ng-app="app">
<h1>Videogular most basic player</h1>
<div ng-controller="VideogularController" class="videogular-container">
<videogular vg-theme="config.theme">
<vg-media vg-src="config.sources" vg-native-controls="config.useNativeControls">
</vg-media>
</videogular>
</div>
</body>
</html>
In order to use our videogular player, we need at least one index.html. The videogular directive receives at least one theme (it will not work without it!), we reference the theme by default from the controller so as not to contaminate the view with functional aspects and, if in the future we want to use any other theme, it will be easy to modify it.
The directive vg-media is in charge of uploading the video file; the minimum attribute that it receives is vg-src, through which we pass the url of at least one video, or several as options that will be uploaded if the previous one fails (that is why “sources” is a vector in our configuration object).
The attribute vg-native-controls shows if the native controllers of the video player navigator will be used. It should be clear that even though this parameter is not necessary, as the directive vg-controls is not uploaded, if we do not use the native controllers there will be no way to start the video, unless if we start it programmatically in an automatic way. Instead, as we use it, we have a video player with volume control, navigable progress bar, running time display, full screen, start, stop and pause, all in four lines of HTML in our index.
Here there is a plunker where we can see the app in this same state
This is the simplest case and there are many things to improve, for example, it does not have the screenshot usually shown when the video has not started yet, which is so typical of Youtube. To add that functionality, we just have to add a directive, vg-poster. Next, I am going to show the final version of our modified files so our directive is incorporated, which will always show the same image while the video has not started, and it removes the image to show the video while it is played.
angular.module('app', [
'ngSanitize',
'com.2fdevs.videogular',
'com.2fdevs.videogular.plugins.poster'
]);
angular.module('app')
.controller('VideogularController', function ($scope, $sce) {
$scope.config = {
sources: [
{src: $sce.trustAsResourceUrl('http://static.videogular.com/assets/videos/videogular.mp4'), type: 'video/mp4'}
],
useNativeControls: true,
posterImage: 'http://www.videogular.com/assets/images/videogular.png',
style:'http://www.videogular.com/styles/themes/default/latest/videogular.css'
}
})
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script src="http://code.angularjs.org/1.2.9/angular-sanitize.js"></script>
<script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script>
<script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="app.js"></script>
<script src="VideogularController.js"></script>
</head>
<body ng-app="app">
<h1>Videogular most basic player</h1>
<div ng-controller="VideogularController" class="videogular-container">
<videogular vg-theme="config.theme">
<vg-media vg-src="config.sources" vg-native-controls="config.useNativeControls">
</vg-media>
<vg-poster vg-url='config.posterImage'></vg-poster>
</videogular>
</div>
</body>
</html>
The attribute vg-url receives a url with the image that will be displayed, there is no need to do any trick to make sure that the image displayed is the one we want, as was the case with the frames at a given time in Youtube. Just as this can be added, we can also add all the videogular plugins we want, some of them will be easier to set, some of them harder. We will always use angular; it is comfortable as we will not deal with other frameworks for one thing and angular for another thing when we are already using angular.
How do we continue?
Videogular official site has many tutorials and documentation about existing plugins, the plugins most often used and a guide for developers to be able to create their own tailored plugins; it is the perfect place to keep learning about this excellent directive.
