Something I’ve been meaning to do is add a video gallery or list of videos contained in this blog. Rather than install a WordPress plugin, I decided to build one on my own using the popular JavaScript library, Angular JS, along with HTML, CSS, JavaScript, and a Lightbox library for showing videos. What I like about Angular for my Video List is that it has some functionality I would normally use PHP for, like dynamically drawing rows for each record of data. In this code screen shot below, the top half is the header row that contains the list filter and sortable title, while the bottom half is where all the other rows repeat for the data in the model.
<!-- this row has the filter input text and sortable title -->
<tr>
<td>filter: <input type="text" ng-model="searchText" /> </td>
<td>blog link <a href="" ng-click="predicate = 'title';
reverse=false">(a-z)</a>
<a href="" ng-click="predicate = '-title'; reverse=false">(z-a)</a></td>
<td>dimensions width x height</td>
<td>video link</td>
</tr>
<!-- this is where the rows repeat according to the data -->
<tr ng-repeat="vid in video_list | filter:searchText | orderBy:predicate:reverse">
<td><img src="{{video_thumb_prefix+vid.url_thumb}}"/> </td>
<td><a href="{{vid.blog}}"
target="blog"><h1>{{vid.title}}</h1></a></td>
<td>{{vid.vid_width + ' x ' +vid.vid_height}}</td>
<td>
<a href="{{video_media_prefix+vid.url_media}}"
rel="shadowbox;width={{vid.vid_width}};height={{vid.vid_height}}"
title="{{vid.title}}">{{vid.url_media}}</a>
</td>
</tr>
Notice the ng-repeat – thats the magic right there for looping through data. The other great feature is that the data is live. As you enter text in the filter, the rows render to match what you typed. Using Angular instead of a server side language enabled me to host it on my CDN as a static set of files (vs dynamic). It’s all .html, .css, .js, and .mp4 videos – no PHP. Download the source to see how it all ties together with the data:
$scope.video_media_prefix="https://d3od4vl78dd97d.cloudfront.net/blogvideo/";
$scope.video_thumb_prefix="https://d3od4vl78dd97d.cloudfront.net/blogpreviews/";
$scope.predicate = '-title';
$scope.video_list=[
{
id:0,
url_media:'tron1.mp4',
url_thumb:'tron1.jpg',
title:'Tron',
vid_width:640,
vid_height:480,
blog:'http://www.arnoldbiffna.com/2014/05/20/tron/'
},
{
id:1,
url_media:'radionbt.mp4',
url_thumb:'radionbt.jpg',
title:'Radio Disney Next Best Thing',
vid_width:508,
vid_height:384,
blog:'http://www.arnoldbiffna.com/2014/05/21/radio-disney-n-b-t/'
},
{
id:2,
url_media:'jonasbrothers.mp4',
url_thumb:'jonasbrothers.jpg',
title:'The Jonas Brothers',
vid_width:511,
vid_height:322,
blog:'http://www.arnoldbiffna.com/2014/05/21/jonas-brothers/'
},
{
id:3,
url_media:'pepsirefresh.mp4',
url_thumb:'pepsirefresh.jpg',
title:'Pepsi Super Bowl',
vid_width:509,
vid_height:354,
blog:'http://www.arnoldbiffna.com/2014/05/20/pepsi-super-bowl/'
},
{
id:4,
url_media:'pandajamad.mp4',
url_thumb:'pandajamad.jpg',
title:'Panda Jam Ads',
vid_width:640,
vid_height:480,
blog:'http://www.arnoldbiffna.com/2014/05/14/panda-jam-ads/'
}
];
});
see it