Page History
...
HTML |
---|
<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> |
...
Overview
Content Tools