• Lesson Index:
• Overview
• Table Structure
• Embedding the Video
• Dynamically Write Code
• Make Function Generic
• Rotating the Videos

Rotation of Videos using Javascript

In these series of lessons, we will be creating the slideshow of videos. So the first video will play for 20 seconds and then it is replaced by a second video that plays for 20 seconds. And so on.

See Live Demo Here

YouTube.com lets us embed their videos on websites by copying and pasting a snippet of HTML code. To make it dynamically switch from video 1 to video 2, we have to write out this HTML code snippet to our page via Javascript. We use Javascript setInterval() method to write out a new HTML snippet every 10 second. As these HTML snippet are written to the page, the video plays.

For the purpose of these lessons, we will use three video from YouTube.com and and have the Javascript rotate them every 10 seconds. We will also have side links that the user can click to force it to play a particular video.

Next Lesson: