Page History
Note | ||
---|---|---|
| ||
In order to be able to play the training videos, please make sure toaccept recommended settings under the Cookie settings option, at the bottom of the page. |
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>
|
Note |
---|
If you do not see the videos, go to Cookies Settings at the bottom of the page and allow all Cookies. For more details, click here. |
Overview
Content Tools