Results 1 to 10 of 10

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

  1. #1
    Join Date
    Feb 2015
    Location
    McAllen, Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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?
    Last edited by Beverleyh; 02-16-2015 at 05:59 AM.

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Feb 2015
    Location
    McAllen, Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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>
    Attached Files Attached Files
    DD Admin

  5. #5
    Join Date
    Feb 2015
    Location
    McAllen, Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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
    Last edited by Beverleyh; 02-21-2015 at 06:54 AM.

  6. #6
    Join Date
    Feb 2015
    Location
    Lonodn
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  7. #7
    Join Date
    Feb 2015
    Location
    McAllen, Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  8. #8
    Join Date
    Feb 2015
    Location
    McAllen, Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Trying to further implement Featured Content Glider

    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
    Last edited by Beverleyh; 06-20-2015 at 04:55 PM. Reason: Formatting

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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>
    DD Admin

  10. #10
    Join Date
    Feb 2015
    Location
    McAllen, Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank You, Thank You, Thank You!

    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
    Last edited by Beverleyh; 07-09-2015 at 08:41 PM. Reason: Formatting

Similar Threads

  1. Playing 'watch_popup videos' using the YouTube Api for embedding videos
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 1
    Last Post: 06-21-2013, 03:18 PM
  2. Youtube Videos in Ajax Tabs Content Script doesn't work
    By Sirius in forum Dynamic Drive scripts help
    Replies: 7
    Last Post: 01-16-2013, 11:48 AM
  3. Content Glider problem with embedded videos in IE
    By vikenk in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 01-13-2013, 05:55 AM
  4. Loading YouTube videos using the most recent YouTube embed code
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 11
    Last Post: 05-28-2012, 11:04 PM
  5. Featured content glider - play pause button
    By jondrew in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-09-2010, 09:35 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •