Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

HTML
<script>
  $( document ).ready(function() {
     // Training Videos Vimeo video IDs
    var videoIDs = [303274080, 303274897, 303275744, 303276184, 303276601, 303277172, 303277831];

    // LoadTime first video
    $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[0]);

    // Show current embedded video and set timebox to active
    $('.timeBox').on('click', function() {
 box template
    var $this = $(this);
      var index = $this.index();

      $('.timeBox').removeClass('active');
      $this.addClass('active');

      $('.videoScreen iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[index]);
    });

    // Get thumbnail images and set them in timebox elements
    $('.timeBox .thumbnail').each(function(n){
      var $this = $(this);
      $.ajax({
        method: "GET",
        url: "https://api.vimeo.com/videos/" + videoIDs[n] + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success: function(datatimeBoxTemplate = function(videoNum, videoID) {
          var imgElem = $('<imgreturn '<div class=\"video-imagetimeBox\" srcid="video_' + data["pictures"]["sizes"][3]["link_with_play_button"]videoID + '" />'); +
         imgElem.appendTo($this);         }
      });
    });

  });
</script>

'<div class=\"trainingVideosContainertitleHolder\">'   <div class="videosMainHolder">+
      <div class="timelineHolder">       '<div class=\"timelinevideoNumberHolder\">' 
   +
    <div class="timeBox active">           '<div class=\"titleHoldervideoNumber\">' + videoNum + '</div>' +
       <div class="videoNumberHolder">               <div class="videoNumber">1<'</div>' +
           </div>             '<div class=\"videoTitle\">Login>' and+ Account Settings</div>
          "" + '</div>' +
         <div class="thumbnail"></div>         '</div>

        <div class="timeBox">' +
            '<div class=\"titleHolderthumbnail\">
            <div class><img src="videoNumberHolder">
              <div class="videoNumber">2</div>
"></div>' +
           '</div>';
    };

    for (var <div class="videoTitle">Recording Setup</div>
 i=0; i<videoIDs.length; i++) {
      var timeBox </div>
          <div class="thumbnail"></div>
        </div>= timeBoxTemplate(i+1, videoIDs[i]); // To start from 1 not from 0
           <div class="timeBox">$(timeBox).appendTo('.timeline');
    }

    <div class="titleHolder">
 // Load first video
    $('.videoScreen      <div class="videoNumberHolder">
              <div class="videoNumber">3</div>
            </div>
            <div class="videoTitle">Camera Controls</div>
          </div>
     iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[0]);

   <div class="thumbnail"></div>
        </div> Get data from vimeo
     <div class="timeBox">
 $.each(videoIDs, function (i, videoID) {
        <div class="titleHolder">$.ajax({
            <div class="videoNumberHolder">method: "GET",
              <div class="videoNumber">4</div>
            </div>
            <div class="videoTitle">Managing the Intercom Function</div>url: "https://api.vimeo.com/videos/" + videoID + '?access_token=0e76ec72e4cc1a5111ac16023a2d0456',
        success: function(data) {

</div>        var timeBox  <div class="thumbnail"></div>
 $('#video_'+videoID);
       </div>

 timeBox.find('.videoTitle').text(data.name);
       <div class="timeBox">
 timeBox.find('.thumbnail img').attr('src', data.pictures.sizes[3].link_with_play_button);
        <div class="titleHolder">}
      });
    });

<div class="videoNumberHolder">   $('.timeBox:first-child').addClass('active');

          <div class="videoNumber">5</div>
        // Show current embedded video and set timebox to active
   </div>
   $('.timeBox').on('click', function() {
      var  $this <div class="videoTitle">Annotating Videos</div> $(this);
      var    </div>
          <div class="thumbnail"></div>
index = $this.index();

      </div>

        <div class="timeBox">$('.timeBox').removeClass('active');
          <div class="titleHolder">$this.addClass('active');

      var     <divid class="videoNumberHolder">
 $this.children('.videoID').val();
      $('.videoScreen       <div class="videoNumber">6</div>
            </div>
            <div class="videoTitle">Video Review and Video Upload</div>
          </div>
 iframe').attr('src', 'https://player.vimeo.com/video/' + videoIDs[index]);
    });

  <div class="thumbnail"></div>
        </div>

        });
</script>

<div class="timeBoxtrainingVideosContainer">
 
        <div class="titleHoldervideosMainHolder">
     
      <div class="videoNumberHoldertimelineHolder">
              <div class="videoNumber">7</div>
 timeline">

         </div>
            <div class="videoTitle">User Management</div>
     
    </div>
    

    <div class="thumbnail"></div>
        </div>

      </div>
    </div>

    <div class="videoHolder">
      <div class="videoScreenHolder">

        <div class="videoScreen">
          <div<iframe stylesrc="padding:62.5% 0 0 0;position:relative;">
            <iframe src="https://player.vimeo.com/video/303274080" style="position:absolute;top:0;left:0;width:100%;height:100%; width="640" height="400" frameborder="0" webkitallowfullscreen="" mozallowfullscreen allowfullscreen></iframe>
          </div>
          <script src="https://player.vimeo.com/api/player.js"></script>="" allowfullscreen=""></iframe>
        </div>

      </div>
    </div>
   </div>
</div>