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