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