Page History

<script>
  $( document ).ready(function() {

    // Training Videos Vimeo video IDs
    var videoIDs = [303274080, 303274897, 303275744, 303276184, 303276601, 303277172, 303277831];

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

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

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

      $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[index]);
    });

    // Get thumbnail images and set them in timebox elements
    $('.timeBox .thumbnail').each(function(n){
      var $this = $(this);
      $.ajax({
        method: "GET",
        url: "https://api.vimeo.com/videos/" + videoIDs[n] + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success: function(datavar timeBoxTemplate = function(videoNum, videoID) {
          var imgElem = $('<imgreturn '<div class=\"video-imagetimeBox\" srcid="video_' + data["pictures"]["sizes"][3]["link_with_play_button"]videoID + '" />');
          imgElem.appendTo($this);
  +
       }
      });
    });

  });
</script>

'<div class=\"trainingVideosContainertitleHolder\">' +
  <div class="videosMainHolder">

    <div class="timelineHolder">
      '<div class=\"timelinevideoNumberHolder\">' +

        <div class="timeBox active">
          '<div class=\"titleHoldervideoNumber\">
' + videoNum +         <div class="videoNumberHolder">'</div>' +
              <div class="videoNumber">1<'</div>
     ' +
       </div>
            '<div class=\"videoTitle\">Login>' and+ Account Settings</div>
          "" + '</div>
     ' +
     <div class="thumbnail"></div>
        '</div>

        <div class="timeBox">' +
          <div class="titleHolder">
             '<div class=\"videoNumberHolderthumbnail\">
              <div class="videoNumber">2</div>><img src=""></div>' +
            '</div>';
    };

    for    <div class="videoTitle">Recording Setup</div>
          </div>(var i=0; i<videoIDs.length; i++) {
      var timeBox =  <div class="thumbnail"></div>
        </div>

timeBoxTemplate(i+1, videoIDs[i]); // To start from 1 not from 0
        <div class="timeBox">$(timeBox).appendTo('.timeline');
    }

    // Load <div class="titleHolder">first video
    $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/'      <div class="videoNumberHolder">
              <div class="videoNumber">3</div>
        + videoIDs[0]);

    </div>
            <div class="videoTitle">Camera Controls</div>
 Get data        </div>from vimeo
    $.each(videoIDs, function (i,    <div class="thumbnail"></div>videoID) {
        </div>
$.ajax({
        <divmethod: class="timeBoxGET">,
          <div class="titleHolder">
            <div class="videoNumberHolder">url: "https://api.vimeo.com/videos/" + videoID + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success:      <div class="videoNumber">4</div>function(data) {

        var timeBox   </div>= $('#video_'+videoID);
            <div class="videoTitle">Managing the Intercom Function</div>timeBox.find('.videoTitle').text(data.name);
        timeBox.find('.thumbnail  </div>img').attr('src', data.pictures.sizes[3].link_with_play_button);
        }
  <div class="thumbnail"></div>
   });
     </div>});

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">$('.timeBox:first-child').addClass('active');

     // Show current embedded video and set timebox  <div class="videoNumber">5</div>to active
    $('.timeBox').on('click',        </div>function() {
            <div class="videoTitle">Annotating Videos</div>var $this = $(this);
          </div>
          <div class="thumbnail"></div>
        </div>var index = $this.index();

        <div class="timeBox">$('.timeBox').removeClass('active');
          <div class="titleHolder">$this.addClass('active');

      var id     <div class="videoNumberHolder">= $this.children('.videoID').val();
      $('.videoScreen        <div class="videoNumber">6</div>
            </div>
            <div class="videoTitle">Video Review and Video Upload</div>
          </div>
          <div class="thumbnail"></div>
        </div>

        <div class="timeBox">
          <div class="titleHolder">
            <div class="videoNumberHolder">
    iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[index]);
    });

  });
</script>

<div class="trainingVideosContainer">
  <div class="videosMainHolder">
    <div class="timelineHolder">
          <div class="videoNumber">7</div>
            </div>
            <div class="videoTitle">User Management</div>
          </div>
          <div class="thumbnail"></div>
 timeline">

       </div>

      </div>
    </div>

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

        <div class="videoScreen">
          <div<iframe stylesrc="padding:62.5% 0 0 0;position:relative;">
            <iframe src="https://player.vimeo.com/video/303274080" style="position:absolute;top:0;left:0;width:100%;height:100%; width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen allowfullscreen></iframe>
          </div>
          <script src="https://player.vimeo.com/api/player.js"></script>="" allowfullscreen=""></iframe>
        </div>

      </div>
    </div>

  </div>
</div>