Page History

<script>
  $( document ).ready(function() {
    // Training Videos Vimeo video IDs 
    var videoIDs = [ 
      636935865, //asset catalog entry
      636939181, //catalog
      636940575, //consumables w expdate
      636941153, //consum wo expdate
      636940103636941730, //asset entry2nonconsum
      636942907, //transaction assignees
      636943358, //checkout
      636942249636944162, //nonconsum2checkin
      636941730636944755, //nonconsumreconcil
      636945284, //setupsheets
      636944755, //reconciltags
      636944162636940103, //checkinasset entry2
      636943358 636942249, //checkoutnonconsum2
    ];
    var videoTokens = [ 
      "c6d153983a", //asset catalog entry
      "613c09991c", //catalog
      "881ea3d58e", //consumables w expdate
      "2fdf994f5a", //consum wo expdate
      "316c3bfee8fa8c5953b7", //asset entry2nonconsum
      "adc094fa5e", //transaction assignees
      "4429475d54d5da94b3ed", //nonconsum2checkout
      "fa8c5953b7a2ec3954cb", //nonconsumcheckin
      "9d49138166bcd424d65b", //setupsheetsreconcil
      "bcd424d65b9d49138166", //setupsheets
      //reconciltags
      "a2ec3954cb316c3bfee8", //checkinasset entry2
      "d5da94b3ed4429475d54" , //checkoutnonconsum2
    ];

    

	// Time box template
   	var timeBoxTemplate = function(videoNum, videoID) {
          return '<div class=\"timeBox\" id="video_'+ videoID +'">' +
            '<div class=\"titleHolder\">' +
              '<div class=\"videoNumberHolder\">' +
                '<div class=\"videoNumber\">' + videoNum + '</div>' +
              '</div>' +
              '<div class=\"videoTitle\">' + "" + '</div>' +
            '</div>' +
            '<div class=\"thumbnail\"><img src=""></div>' +
          '</div>';
    };

    for (var i=0; i<videoIDs.length; i++) {
      var timeBox = timeBoxTemplate(i+1, videoIDs[i]); // To start from 1 not from 0
      $(timeBox).appendTo('.timeline');
    }

    // Load first video
    $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[0] + '?h=' + videoTokens[0]);

    // Get data from vimeo
    $.each(videoIDs, function (i, videoID) {
      $.ajax({
        method: "GET",
        url: "https://api.vimeo.com/videos/" + videoID + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success: function(data) {

        var timeBox = $('#video_'+videoID);
        timeBox.find('.videoTitle').text(data.name);
        timeBox.find('.thumbnail img').attr('src', data.pictures.sizes[3].link_with_play_button);
        }
      });
    });

    $('.timeBox:first-child').addClass('active');

     // Show current embedded video and set timebox to active
    $('.timeBox').on('click', function() {
      var $this = $(this);
      var index = $this.index();

      $('.timeBox').removeClass('active');
      $this.addClass('active');

      var id = $this.children('.videoID').val();
      $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[index] + '?h=' + videoTokens[index]);
    });

  });
</script>

<div class="trainingVideosContainer">
  <div class="videosMainHolder">
    <div class="timelineHolder">
      <div class="timeline">

      </div>
    </div>

    <div class="videoHolder">
      <div class="videoScreenHolder">

        <div class="videoScreen">
          <iframe src="" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
        </div>

      </div>
    </div>
  </div>
</div>