A video gallery is a collection of videos that are put together in a single frame. In this article we will perform a step by step approach to make a Video Gallery using AngularJS.
Introduction
A video gallery is a collection of videos that are put together in a single frame. In this article we will perform a step by step approach to make a Video Gallery using AngularJS.
Straight to experiment
Step 1 : Video Collection
Let us first create a folder by the name "videos" and gather some videos to it
Step 2 : Create the view
Let us first create a html view say "index.html" as under
<!DOCTYPE html>
<html >
<head>
<title>Video Gallery - RNA Team</title>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div style="width: 60%; margin: 0 auto;">
<center><font color="blue">Video Gallery by RNA Team</font></center>
<div id="divVideo"></div>
</div>
</body>
</html>
A simple html file, where we have added the angularJS and jquery reference and added a div to it.
Step 3 : Create the controller
Let us first create a javascript file say "videocollage.js" in which we will write our controller. We will first define the video sources as under
angular
.module('videoCollageModule', [])
.controller('videoCollageCtrl', function ($scope) {
var videoSource = [
[ "D:\\songs\\1.mp4","D:\\songs\\2.mp4","D:\\songs\\3.mp4","D:\\songs\\4.mp4"],
[ "D:\\songs\\5.mp4","D:\\songs\\6.mp4","D:\\songs\\7.mp4","D:\\songs\\8.mp4"],
[ "D:\\songs\\9.mp4","D:\\songs\\10.mp4","D:\\songs\\11.mp4","D:\\songs\\12.mp4"],
[ "D:\\songs\\13.mp4","D:\\songs\\14.mp4","D:\\songs\\15.mp4","D:\\songs\\16.mp4"]
];
});
We have initially defined "videoSource" as a 2D array. Next we will create a 4X4 matrix and will create the table with rows and columns and put the Html5 video tag to those cells at runtime as shown below
var body = "<table width='100%' height='575'>";
var row=4;
var col=4;
for(var i=0;i<row;i++){
body += "<tr>";
for(var j=0;j<col;j++)
{
body +="<td> <video width='100%' height='100' id='"+i+j+"' src='" + videoSource[i][j] + "' controls='false'" +"</td>";
}
body += "</tr>";
}
body += "</table>";
If we print at the console, the out of the body variable will be
<table width='100%' height='575'><tr><td> <video width='100%' height='100' id='00' src='D:\songs\1.mp4' controls='false'</td><td> <video width='100%' height='100' id='01' src='D:\songs\2.mp4' controls='false'</td><td> <video width='100%' height='100' id='02' src='D:\songs\3.mp4' controls='false'</td><td> <video width='100%' height='100' id='03' src='D:\songs\4.mp4' controls='false'</td></tr><tr><td> <video width='100%' height='100' id='10' src='D:\songs\5.mp4' controls='false'</td><td> <video width='100%' height='100' id='11' src='D:\songs\6.mp4' controls='false'</td><td> <video width='100%' height='100' id='12' src='D:\songs\7.mp4' controls='false'</td><td> <video width='100%' height='100' id='13' src='D:\songs\8.mp4' controls='false'</td></tr><tr><td> <video width='100%' height='100' id='20' src='D:\songs\9.mp4' controls='false'</td><td> <video width='100%' height='100' id='21' src='D:\songs\10.mp4' controls='false'</td><td> <video width='100%' height='100' id='22' src='D:\songs\11.mp4' controls='false'</td><td> <video width='100%' height='100' id='23' src='D:\songs\12.mp4' controls='false'</td></tr><tr><td> <video width='100%' height='100' id='30' src='D:\songs\13.mp4' controls='false'</td><td> <video width='100%' height='100' id='31' src='D:\songs\14.mp4' controls='false'</td><td> <video width='100%' height='100' id='32' src='D:\songs\15.mp4' controls='false'</td><td> <video width='100%' height='100' id='33' src='D:\songs\16.mp4' controls='false'</td></tr></table>
Finally we have to bind this to the #divVideo div as under
$("#divVideo").html(body);
Also we need to make the corresponding changes (only need to add the videocollage.js reference) to our view (index.html)
<!DOCTYPE html>
<html >
<head>
<title>Video Gallery - RNA Team</title>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="videocollage.js"></script>
</head>
<body ng-app="videoCollageModule" ng-controller="videoCollageCtrl">
<div style="width: 60%; margin: 0 auto;">
<center><font color="blue">Video Gallery by RNA Team</font></center>
<div id="divVideo"></div>
</div>
</body>
</html>
Now we will apply some style sheets to it. So let's change our view again as under.
<!DOCTYPE html>
<html >
<head>
<title>Video Gallery - RNA Team</title>
<style>
.videoDiv
{
border: 10px double red;
border-radius: 5%;
}
</style>
<script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="videocollage.js"></script>
</head>
<body ng-app="videoCollageModule" ng-controller="videoCollageCtrl">
<div style="width: 60%; margin: 0 auto;">
<center><font color="blue">Video Gallery by RNA Team</font></center>
<div id="divVideo" class="videoDiv"></div>
</div>
</body>
</html>
We have used the border property with value as double for adding a double border to the div.
border: 10px double red;
And for the rounded corner, we used the border-radius property
border-radius: 5%
Let us run the application and the output is as under
Reference
CSS Reference
Conclusion
In this article we have learnt how to create a video gallery using AngularJS. Hope this will be useful. Thanks for reading. Zipped file attached.