Page History
HTML |
---|
<script> $( document ).ready(function() { // Show current embedded video and set timebox to active $('.timeBox').on('click', function() { var $this = $(this); var index = $this.index() + 1; $('.timeBox').removeClass('active'); $this.addClass('active'); $('.videoScreen').addClass('trueHidden'); $('.videoScreen:nth-child(' + index + ')').removeClass('trueHidden'); }); // Training Videos Vimeo video IDs var videoIDs = [303274080, 303274897, 303275744, 303276184, 303276601, 303277172, 303277831]; // Get thumbnail images and set them in timeline elements $( document ).ready(function() { $('.timeBox .thumbnail').each(function(n){ var $this = $(this); $.ajax({ method: "GET", url: "https://api.vimeo.com/videos/" + videoIDs[n] + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456', success: function(data) { var imgElem = $('<img class="video-image" src="' + data["pictures"]["sizes"][4]["link_with_play_button"] + '" />'); imgElem.appendTo($this); //var titleElem = $('<span class="video-title">' + data["name"] + '</span>')} //titleElem.appendTo($(this).find('.videoTitle')); }); }); }); }); }); </script> <div class="trainingVideosContainer"> <div class="videosMainHolder"> <div class="timelineHolder"> <div class="timeline"> <div class="timeBox active"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">1</div> </div> <div class="videoTitle">Login and Account Settings</div> <input id="videoID" type="hidden" value="" > </div> <div class="thumbnail">></div> </div> </div> <div class="timeBox"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">2</div> </div> <div class="videoTitle">Recording Setup</div> </div> <div class="thumbnail"> ></div> </div> </div> <div class="timeBox"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">3</div> </div> <div class="videoTitle">Camera Controls</div> </div> <div class="thumbnail"> ></div> </div> </div> <div class="timeBox"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">4</div> </div> <div class="videoTitle">Managing the Intercom Function</div> </div> <div class="thumbnail"> ></div> </div> </div> <div class="timeBox"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">5</div> </div> <div class="videoTitle">Annotating Videos</div> </div> <div class="thumbnail"> ></div> </div> </div> <div class="timeBox"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">6</div> </div> <div class="videoTitle">Video Review and Video Upload</div> </div> <div class="thumbnail"> </div> </div> </div> <div class="timeBox"> <div class="titleHolder"> <div class="videoNumberHolder"> <div class="videoNumber">7</div> </div> <div class="videoTitle">User Management</div> </div> <div class="thumbnail"> </div> </div> </div> </div> </div> <div class="videoHolder"> <div class="videoScreenHolder"> <div class="videoScreen"> <iframe src="https://player.vimeo.com/video/303274080" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <div class="videoScreen trueHidden"> <iframe src="https://player.vimeo.com/video/303274897" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen allowfullscreen><="" allowfullscreen=""></iframe> </div> <div class="videoScreen trueHidden"> <iframe src="https://player.vimeo.com/video/303275744" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <div class="videoText"> <div class="videoLargeTitle"></div> ="videoScreen trueHidden"> <iframe src="https://player.vimeo.com/video/303276184" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <div class="videoScreen trueHidden"> <iframe src="https://player.vimeo.com/video/303276601" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <div class="videoScreen trueHidden"> <iframe src="https://player.vimeo.com/video/303277172" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> <div class="videoDescription"></"videoScreen trueHidden"> <iframe src="https://player.vimeo.com/video/303277831" width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> </div> </div> </div> </div> </div> |
Overview
Content Tools