NDP video player

by bradoyler

HTML

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<article>
<h1 class="headline">Test article with 2 videos</h1>

<div id="player_447726659600_1" class='player-container'>
    <h2 class="play"><span class='btn'>PLAY > </span></h2>
</div>

<h3>test</h3><h3>test</h3>

<div id="player_367689795707_1" class='player-container'>
    <h2 class="play"><span class='btn'>PLAY > </span> </h2>
</div>

<h3>test</h3><h3>test</h3><h3>test</h3><h3>test</h3><h3>test</h3>
</article> 

<div id="playerframe" class="ndp-player"> ndp-player </div>

<script>
      window.$ndp = {};
      $ndp.configuration = {
          // freewheel: {
          //     network: 171224,
          //     url: "http://29cd8.v.fwmrm.net/ad/g/1"
          // },
          siteData: {
              "siteSection": "nbcnews_videofront",
              "sect": "news",
              "topic": "toyota-concert-series",
              "series": "morning-routine"
          },
          pdk: {
              source: {
                  version: "5.5.6",
                  url: "http://media1.s-nbcnews.com/i/videoassets/pdk/5.5.6/"
              },
              skin: {
                  version: "Today 1.0.2",
                  url: "http://media1.s-nbcnews.com/i/videoassets/ndp/1.0.2/pdkTodayData/todaySkin/brushed.json"
              },
              layout: {
                  version: "Today 1.0.2",
                  url: "http://media1.s-nbcnews.com/i/videoassets/ndp/1.0.2/pdkTodayData/metaLayout_controlRack.xml"
              }
          }
      };
</script>

<script src='http://media1.s-nbcnews.com/i/videoassets/staging/ndp/ndpplayer-native.js'></script>

<script>
    window.playerInstances = [
    {
    id: "447726659600_1",
    videoObj: {
            type: "",
            widget_type: "",
            videoType: "Original",
            mpxId: "447726659600",
            guid: "a_30stk_bird_flu_150519",
            pubDate: "2015-06-03 12:39:00 Z",
            expirationDate: "2112-11-21 12:39:00...

CSS

.player-container {
  width: 400px;
  height: 260px;
  background-color:#fff;
}

#playerframe {
    background-color:#CCC;
    position:absolute;
    left: -999;
}

.player-container > img {
    width: 400px;
    height: 260px;
}

#player

JavaScript

var config = { id: new Date().getTime(), autoPlay: false, location: document.getElementById('playerframe')};

window.ndpPlayer = new NDPPlayer(config);

function resetOtherPlayers(currentInstance) {
    $.each(playerInstances, function(i, playerInstance) {
        if(playerInstance.id !== currentInstance.id) {
           playerInstance.isPlaying = false;
        }
    });
}

function repositionPlayerTo(selector) {
  var offset = $(selector).offset();
  var width  = $(selector).width();
  var height = $(selector).height();
  $('#playerframe')
  .css('top',offset.top).css('left',offset.left)
  .css('width', width).css('height', height);  
}

function loadPlayer (instance) {
     var MPXMediaAsset = $ndp.MPXMediaAsset;
     var videoMetaData = new MPXMediaAsset(instance.videoObj);
     ndpPlayer.mediaAsset(videoMetaData);
     instance.isPlaying = true;
     resetOtherPlayers(instance);
}

function initPlayerChrome (instance) {
    var teaseImg = $('<img />',
                {
                    id: 'teaseimg_' + instance.id,
                    class:'tease',
                    src: instance.videoObj.thumbnail,
                    alt: 'test alt'
                });
    
  console.log('### init', instance);
  
   // insert tease img
   $('#player_'+instance.id).prepend(teaseImg);
   $('#player_'+instance.id).find('.play').append(instance.videoObj.title);
   
    // Play button
   $('#player_'+instance.id).on('click', function () {
         //console.log('### clicked: ', instance, this);
         
         if (!instance.isPlaying) {
              repositionPlayerTo('#player_' + instance.id);
              loadPlayer(instance);
              ndpPlayer.play();
              $('.tease').show();
              $('#teaseimg_' + instance.id).hide();
         }
    });
}

$(function () {
    
    $.each(playerInstances, function(i, instance) {
      initPlayerChrome(instance);
    });
    
 });