PDA

View Full Version : 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/dynamicindex17/featuredcontentglider.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 (https://developers.google.com/youtube/js_api_reference#Events), 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:


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:


<!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:


<!--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:


<!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