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
      636941730, //nonconsum
      636942907, //transaction assignees
      636943358, //checkout
      636944162, //checkin
      636944755, //reconcil
      636945284, //setupsheets
      638968696, //Request items using asset tags
      638970242, //Asset properties
      638587091, //Properties of consumables with expiration date
      638587814, //Properties of non-consumables and consumables without expiration date
      638588414, //Asset maintenance and repair
      638588977 //Inventory reports
    ];
    var videoTokens = [ 
      "c6d153983a", //asset catalog entry
      "613c09991c", //catalog
      "881ea3d58e", //consumables w expdate
      "2fdf994f5a", //consum wo expdate
      "fa8c5953b7", //nonconsum
      "adc094fa5e", //transaction assignees
      "d5da94b3ed", //checkout
      "a2ec3954cb", //checkin
      "bcd424d65b", //reconcil
      "9d49138166", //setupsheets
      "d6778a8b2c", //Request items using asset tags
      "f0ce5d616e", //Asset properties
      "1a9f5f51a7", //Properties of consumables with expiration date
      "6b4e8a0996", //Properties of non-consumables and consumables without expiration date
      "3bafba3c3a", //Asset maintenance and repair
      "65df89e15a" //Inventory reports
    ];

    // 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>