Featured Content Glider be configured to play embedded Youtube videos in sequence?

**drmichaelbell** · 02-06-2015, 10:13 PM

1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tentglider.htm

3) Describe problem:
The glider works great as it is. I am trying to implement it here:

http://50smusicvideos.com/ (I'm just starting this & hope to have a better looking implementation soon!)

As now set-up, it autoloads the first video video and plays it. If the user clicks another video, the current video stops, the clicked video plays, and so forth.

I would like to alter it so that when a video plays through, the next video in sequence is automatically loaded and played. Is this possible?

**ddadmin** · 02-13-2015, 05:32 PM

Looking at the Youtube Player API, you can detect when a video has finished playing by using the event "onStateChange" of the player object. Here is the original onYouTubeIframeAPIReady() function of the script you've already added to your page, modified to alert a message whenever a video has finished playing:

Code:

function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
	jQuery(function($){ // when DOM has loaded
		var $contentdivs = $('#canadaprovinces').find('div.glidecontent')
		$contentdivs.each(function(i){ // loop through the content divs
			var $contentdiv = $(this)
			var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
			if ($youtubeframe.length == 1){
			  var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
			    events: {
			      'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading

			    }
			  })
				player.addEventListener("onStateChange", function(e){
					if (e.data == 0){ // if finished playing current video
						alert("This video has finished playing")
					}
				})
				$contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
			}
		})
	})
}

Having said that, to go from the above to what you're looking for requires making further changes to the core .js file of Featured Content Glider. If you're still interested and I have time, I'll take a stab at that.

**drmichaelbell** · 02-16-2015, 03:53 AM

Please, if you have time. I think extending the functionality of the glider would be very useful to me and to others. - M.Bell

**ddadmin** · 02-17-2015, 10:31 PM

Ok try the below modified version of the script. When a youtube video is played in one of the slides, at the end, the script automatically goes to the next slide and plays that video, doing so until a video is stopped.

First is the modified featuredcontentglider.js file, which only differs from the original slightly (by caching the config object). Then comes the modified onYouTubeIframeAPIReady() function, with changes in red against the standard markup and code you paste to your page:

Code:

<!doctype html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />

<script type="text/javascript" src="featuredcontentglider.js">

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script>

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: false, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
	onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
  	if (previndex != curindex)
			playpausevideo($allcontents.eq(previndex).data('youtubeplayer'), 'pause') //pause previous slide's video
	}
})

</script>

<script type="text/javascript">

function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
	jQuery(function($){ // when DOM has loaded
		var $contentdivs = $('#canadaprovinces').find('div.glidecontent')
		$contentdivs.each(function(i){ // loop through the content divs
			var $contentdiv = $(this)
			var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
			if ($youtubeframe.length == 1){
			  var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
			    events: {
			      'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading

			    }
			  })
				player.addEventListener("onStateChange", function(e){
					if (e.data == 0){ // if finished playing current video
						var targetconfig = featuredcontentglider.configs["canadaprovinces"]
						var nextslide = parseInt(targetconfig.$next.get(0).getAttribute('loadpage'))
						featuredcontentglider.glide(targetconfig, nextslide, "next") // go to next slide
						playpausevideo($contentdivs.eq(nextslide).data('youtubeplayer'), 'play')
					}
				})
				$contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
			}
		})
	})
}

function playpausevideo(player, action){
	if (player && player._donecheck === true){
		if (action == "play")
			player.playVideo()
		else if (action == "pause")
			player.pauseVideo()
	}
}

</script>

<!--Youtube API reference. Should follow onYouTubeIframeAPIReady() above, not proceed: -->

<script src="http://www.youtube.com/iframe_api"></script>

</head>

<body>



<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/KWFfDyupGpQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/to7uIG8KYhg?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/RP4abiHdQpc?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/FNeaQtFuBns?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a> <a href="#" class="toc">Page 4</a>
<a href="#" class="next">Next</a>
</div>

</body>

</html>

**drmichaelbell** · 02-21-2015, 04:19 AM

I replaced the Featured Content Glider with the new code you supplied on all my pages on http://www.50smusicvideos.com . It all worked perfectly! Thanks for all you have done.
Sincerely,
Michael Bell

**marckstate** · 02-21-2015, 04:36 PM

Is this script works in a variety of modifications to the code?

**drmichaelbell** · 04-11-2015, 03:02 PM

The Featured Content Glider is a fabulous script! I’m using it on this site:
50smusicvideos.com . The site is still not ready from prime time, as I have not added a lot of content, and the menu is not finished. Through the help I received from this forum, I was able to alter the script so that it plays all the videos in the playlist automatically.

Each of the 8 playlists has about 30 videos. As now set-up, each video plays sequently from first to last video. Then, the playlist starts again from the top. The user can manually select any one of the eight playlists at any time.

I would like to alter the script so that when the last video in a playlist is finished, then, instead of going to the top of the same playlist, the script would load any html file I designate. Is this possible?

Thanks in advance for your fabulous help!

Sincerely,
Michael Bell

**drmichaelbell** · 06-20-2015, 03:12 PM

I am still trying to implement a version of the Featured Content Glider to play Youtube videos in sequence, and when the last video finishes, go on to a new page (playlist.) The version here, http://www.50smusicvideos.com , works great. It plays all 24 videos in the first playlist (index.html), but when finished, starts at the top of the same playlist and plays all the same videos again.

My javascript skills are very limited. I did create an alternate first page, index_alt.html. I added a 25th iframe that looks like this:

Code:

<!--25 Next Playlist -->
<div  class="glidecontent">
<iframe marginwidth="0" marginheight="0" onload="window.location.href ='index2.html';" scrolling="auto" src="">Sorry, your browser does not suport inline frames!</iframe>
</div>

This didn’t work. It did open the new playlist, but did so immediately when index_alt.html loaded. I need it to play through the first 24 videos, and then go to the new page.

Is there any hope for me on this? Any help would be greatly appreciated.

Michael Bell

**ddadmin** · 06-22-2015, 01:08 AM

Hi Michael:
Try the below modified frontend code (the .js file remains the same as before) to get the script to navigate to a new page when the last video is played. The code in red highlights what's different between this version of the frontend code compared to what I posted earlier above:

Code:

<!doctype html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<link rel="stylesheet" type="text/css" href="featuredcontentglider.css" />

<script type="text/javascript" src="featuredcontentglider.js">

/***********************************************
* Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>

<script>

featuredcontentglider.init({
	gliderid: "canadaprovinces", //ID of main glider container
	contentclass: "glidecontent", //Shared CSS class name of each glider content
	togglerid: "p-select", //ID of toggler container
	remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
	selected: 0, //Default selected content index (0=1st)
	persiststate: false, //Remember last content shown within browser session (true/false)?
	speed: 500, //Glide animation duration (in milliseconds)
	direction: "downup", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
	autorotate: false, //Auto rotate contents (true/false)?
	autorotateconfig: [3000, 2], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
	onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
  	if (previndex != curindex)
			playpausevideo($allcontents.eq(previndex).data('youtubeplayer'), 'pause') //pause previous slide's video
	}
})

</script>

<script type="text/javascript">

function onYouTubeIframeAPIReady(){ // this function is called automatically when Youtube API is loaded (see: https://developers.google.com/youtube/iframe_api_reference)
	jQuery(function($){ // when DOM has loaded
		var $contentdivs = $('#canadaprovinces').find('div.glidecontent')
		$contentdivs.each(function(i){ // loop through the content divs
			var $contentdiv = $(this)
			var $youtubeframe = $contentdiv.find('iframe[src*="youtube.com"]:eq(0)') // find Youtube iframe within DIV, if it exists
			if ($youtubeframe.length == 1){
			  var player = new YT.Player($youtubeframe.get(0), { // instantiate a new Youtube API player on each Youtube iframe (its DOM object)
			    events: {
			      'onReady': function(e){e.target._donecheck=true} // indicate when video has done loading

			    }
			  })
				player.addEventListener("onStateChange", function(e){
					if (e.data == 0){ // if finished playing current video
						var targetconfig = featuredcontentglider.configs["canadaprovinces"]
						var nextslide = parseInt(targetconfig.$next.get(0).getAttribute('loadpage'))
						if (nextslide == 0){ // if at end of slides
							window.location = "new.htm"
						}
						featuredcontentglider.glide(targetconfig, nextslide, "next") // go to next slide
						playpausevideo($contentdivs.eq(nextslide).data('youtubeplayer'), 'play')
					}
				})
				$contentdiv.data("youtubeplayer", player) // store Youtube API player inside contentdiv object
			}
		})
	})
}

function playpausevideo(player, action){
	if (player && player._donecheck === true){
		if (action == "play")
			player.playVideo()
		else if (action == "pause")
			player.pauseVideo()
	}
}

</script>

<!--Youtube API reference. Should follow onYouTubeIframeAPIReady() above, not proceed: -->

<script src="http://www.youtube.com/iframe_api"></script>

</head>

<body>



<div id="canadaprovinces" class="glidecontentwrapper">

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/KWFfDyupGpQ?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/to7uIG8KYhg?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/RP4abiHdQpc?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

<div class="glidecontent">
<iframe width="330" height="210" src="http://www.youtube.com/embed/FNeaQtFuBns?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
</div>

</div>

<div id="p-select" class="glidecontenttoggler">
<a href="#" class="prev">Prev</a> 
<a href="#" class="toc">Page 1</a> <a href="#" class="toc">Page 2</a> <a href="#" class="toc">Page 3</a> <a href="#" class="toc">Page 4</a>
<a href="#" class="next">Next</a>
</div>

</body>

</html>

**drmichaelbell** · 07-09-2015, 08:10 PM

Well, I just got back from a trip. I replaced my latest version of the Featured Content Glider with the new code you supplied on all my pages on http://www.50smusicvideos.com. It all worked perfectly! Now, it plays straight through the eight pages (playlists) I created, about 250 Youtube videos. The only remaining glitch happens when Youtube yanks an account, ostensibly for copyright concerns. You know, "The account associated with this video has been taken down because, blah, blah, blah." When this happens, everything just stops. Probably nothing can be done about this, or perhaps it just needs an "Event Listener" tweek?
You're awesome! Thanks for all you have done.
Sincerely,
Michael Bell