Page History
Note | ||
---|---|---|
| ||
In order to be able to play the training videos, please make sure to accept 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 = [303274080, 303274897, 303275744, 303276184, 303276601, 303277172, 303277831];
// 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]);
// 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]);
});
});
</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>
|
Widget Connector | ||||
---|---|---|---|---|
|
Overview
Content Tools