A step by step approach to make a Video Gallery in AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 502 red flag

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.


 Download source code for A step by step approach to make a Video Gallery in AngularJS

Recommendation
Read A step by step approach to make a Photo Collage in AngularJS before this article.

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.

Recommendation
Read Pagination using EmberJS and WebAPI after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)