Video List Using Angular JS

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="http://cdn.arnoldbiffna.com/blogvideo/";
    $scope.video_thumb_prefix="http://cdn.arnoldbiffna.com/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/'
        }

    ];


});

Panda Jam Ads

 

 The ad that pops up over the Facebook Flash game Panda Jam are actually HTML / CSS / JavaScript / and ActionScript all working together. Panda Jam has over 1 million players world wide and monetizes on each ad shown. Inter-level ads display in between levels of the game and use Adap TV’s JavaScript API. For the Ad Sales team, I programmed it with a complex set of factors of how and when to show ads, such as:

  • no ads until the 2nd round
  • don’t show more than 1 ad within a minute
  • no ads for users who made a purchase in the past
  • no more than two ads per game
  • restrict ads to certain geographic regions determined by Facebook API
  • Ad server errors would get trapped and bypass the ad, so the user would not be affected

These settings were all configurable via an xml and may have changed since. Once the ad completes, the game resumes. Using JQuery and the Adap TV JavaScript API, PlayerIO API, and ActionScript’s External Interface, this system was then integrated into other games.Launch Flash!see it