Featured Content Slider. Youtube video don´t stop when slider changes

**Vlack** · 06-07-2011, 03:16 PM

1) Script Title: Featured Content Slider v2.4 problem with IE, Chrome... when play YOUTUBE Video

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ntentslider.js

3) Describe problem: First to all, thanks for sharing your knowledge. You are GREAT!

(sorry for my english)
My problem comes when I try to insert videos from YouTube in the slider (by php), when a video is in play, and the slider changes, this video continues to run below the second. (with "display:none;" still run) would be great to get that when the slider changes (because you clik on a thumbnail) , the video on play stops. Could you help me pleaseee

Thank you very much for your time and effort. (Youtube video are insert by <iframe> to validate, <embed> doesn´t work)

**ddadmin** · 06-07-2011, 06:42 PM

You can use the script's onchange event handler to insert custom code to execute whenever the slider changes slides. It is automatically fed two parameters, the index of the last slide viewed, and the index of the current visible slide:

Code:

onChange: function(previndex, curindex){
//custom code here
}

When the Slider first loads on the page, the two parameters point to the same slide. The count starts at 1, meaning 1 indicates the 1st slide, 2 the second etc. One sample usage is to stop a video playing on the previous slide when a new slide is brought up:

Code:

onChange: function(previndex, curindex){
if (previndex==curindex) //if two indices point to the same slide (page first loads)
 return //do nothing
else if (previndex==1)
 videoplayer.stop("cats")
else if (previndex==2)
 videoplayer.stop("dogs")
else if (previndex==3)
 videoplayer.stop("myvacation")
}

This assumes videoplayer.stop() is some function that stops the playing of a video inside your slides.

In the case of stopping a Youtube video, based on the details provided here, apparently the function to call is:

Code:

document.getElementById('playerid').stopVideo()

where "playerid" is the ID given to the EMBED element that displays the Youtube video to stop it.

**Vlack** · 06-08-2011, 08:44 PM

Thank you very much but I can not get it. I put this code but with IE and now also chrome, still keep videos running below.

Code:

<?php

defined('_JEXEC') or die('Restricted access');
$document 		=& JFactory::getDocument();
$baseurl 		= JURI::base();

$youtubecode 		= $params->get( 'youtubecode' );
$width		 		= $params->get( 'width', 250 );
$height		 		= $params->get( 'height', 220 );
$fullsc_btn			= $params->get( 'fullsc_btn' );
$player_border		= $params->get( 'player_border' );
$player_clr1		= $params->get( 'player_clr1' );
$player_clr2		= $params->get( 'player_clr2' );

$height_thumbs		= $params->get( 'height_thumbs', 60 );
$outer_color 		= $params->get( 'outer_color', '#000' );
$inner_color 		= $params->get( 'inner_color', '#fff' );
$pagination_color 	= $params->get( 'pagination_color', '#0f0f0f' );
$inner_padding 		= $params->get( 'inner_padding', 5 );
$num_vid			= $params->get( 'num_vid');
$thumb_align		= $params->get( 'thumb_align');

$youtubelist 	= explode( ',', $youtubecode );
$numyoutube 	= count($youtubelist);

$width_thumb	= ($width/$num_vid) - ($inner_padding);

//Get this module id
$featytslide	= $module->id;

//Get duplicate module or not
$a=1;
foreach ($list as $item) :
	//$total=$a;
	$enddbid = $item->id;
		if ($featytslide==$enddbid) {$nummod=$a;}
	$a++;	
endforeach;

$document->addCustomTag("<script type='text/javascript' src='".$baseurl."modules/mod_featured_youtube_slider/library/contentslider.js'></script>");
$document->addStyleSheet('modules/mod_featured_youtube_slider/css/style.css');
$document->addCustomTag("<script src='http://www.google.com/jsapi' type='text/javascript'></script>");
?>

<div class="modfytslider">
<div id="fytslider<?php echo $nummod; ?>" class="sliderwrapper">
	<?php for ($i=0; $i<$numyoutube; $i++) { ?>
	<div class="contentdiv">
		<iframe id="playerid<?php echo $i;?>" width="<?php echo $width;?>" height="<?php echo $height;?>" src="http://www.youtube.com/v/<?php echo $youtubelist[$i];?>?rel=0&amp;color1=0x<?php echo $player_clr1; ?>&amp;color2=0x<?php echo $player_clr2; ?>&amp;border=<?php echo $player_border; ?>&amp;fs=<?php echo $fullsc_btn; ?>" frameborder="0" ></iframe>
	</div>
    
    
    
    
	<?php } ?>
</div>

<div id="paginate-fytslider<?php echo $nummod; ?>" class="paginationfytslide">
	<div style="text-align: <?php echo $thumb_align; ?>; padding-left: 2px; padding-right: 2px;">
	<?php for ($i=0; $i<$numyoutube; $i++) { ?>
		<a href="/" class="toc">
			<img src="http://i3.ytimg.com/vi/<?php echo $youtubelist[$i];?>/default.jpg" width="<?php echo $width_thumb; ?>px" height="<?php echo $height_thumbs; ?>px" alt="VídeosUAH"></img>
		</a>
	<?php } ?>
	</div>
	<div style="text-align: right; font-size:8px; padding-right:3px; font-family:fantasy;"><a href="http://www.showlands.com" target="_blank" title="Powered by Featured YouTube Slider">YouTube Slider</a></div>
</div>
</div>
<script type="text/javascript">

featuredcontentslider.init({
	id: "fytslider<?php echo $nummod; ?>",  //id of main slider DIV
	contentsource: ["inline", ""],  
	toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
	nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
	revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
	enablefade: [false, 0.2],  //[true/false, fadedegree]
	autorotate: [false, 3000],  //[true/false, pausetime]
	onChange: function(previndex, curindex){ 
if (previndex==curindex) //if two indices point to the same slide (page first loads)
 return //do nothing
else if (previndex==1)
document.getElementById('playerid0').stopVideo()
else if (previndex==2)
document.getElementById('playerid1').stopVideo()
else if (previndex==3)
document.getElementById('playerid2').stopVideo()
else if (previndex==4)
document.getElementById('playerid3').stopVideo()
else if (previndex==4)
document.getElementById('playerid4').stopVideo()
else if (previndex==6)
document.getElementById('playerid5').stopVideo()
else if (previndex==6)
document.getElementById('playerid6').stopVideo()
else if (previndex==8)
document.getElementById('playerid7').stopVideo()
else if (previndex==9)
document.getElementById('playerid8').stopVideo()

 //event handler fired whenever script changes slide


		//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
		
		//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
	}
})

</script>

I think is a problem with the specific code to stop video in the youtube player.
I don´t know. i´m doing something wrong, sure. I´m still learning

the code i put in onChange function is

Code:

if (previndex==curindex) //if two indices point to the same slide (page first loads)
 return //do nothing
else if (previndex==1)
document.getElementById('playerid0').stopVideo()
else if (previndex==2)
document.getElementById('playerid1').stopVideo()
else if (previndex==3)
document.getElementById('playerid2').stopVideo()
else if (previndex==4)
document.getElementById('playerid3').stopVideo()
else if (previndex==4)
document.getElementById('playerid4').stopVideo()
else if (previndex==6)
document.getElementById('playerid5').stopVideo()
else if (previndex==6)
document.getElementById('playerid6').stopVideo()
else if (previndex==8)
document.getElementById('playerid7').stopVideo()
else if (previndex==9)
document.getElementById('playerid8').stopVideo()

Anyway thank you very much for your quick response.
You are the best
Any sugerence???

**ddadmin** · 06-09-2011, 07:16 AM

First see if you can get your video to successfully stop using JavaScript, then try and integrate that code into the slideshow script. Does:

Code:

document.getElementById('playerid0').stopVideo()

when called by itself successfully stop the video with id=playerid0 on your page?

**Vlack** · 06-09-2011, 08:48 AM

Yes, I can't get the video. I think the id="" inside the iframe doesn´t runs... : I'm confused:

I change two parts:
I put the code with the id outside the iframe, in the contentdiv

Code:

<div id="fytslider<?php echo $nummod; ?>" class="sliderwrapper">
	<?php for ($i=0; $i<$numyoutube; $i++) { ?>
	<div class="contentdiv" id="playerid<?php echo $i;?>">
		<iframe  width="<?php echo $width;?>" height="<?php echo $height;?>" src="http://www.youtube.com/v/<?php echo $youtubelist[$i];?>?rel=0&amp;color1=0x<?php echo $player_clr1; ?>&amp;color2=0x<?php echo $player_clr2; ?>&amp;border=<?php echo $player_border; ?>&amp;fs=<?php echo $fullsc_btn; ?>" frameborder="0" ></iframe>
	</div>

And I test some vídeos with

Code:

document.getElementById('playerid0').innerHTML=""

When I change the slider videos die forever

then, the identification is good now,
but I can´t do nothing with the video because it is not an embed tag... and the id needed is inside a div tag, not a embed tag...

Maybe with a specific reload? we can save the problem videos running below...

I don´t know....
What do you think?

Thanks a lot