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