Results 1 to 8 of 8

Thread: Featured Content Slider. Youtube video donīt stop when slider changes

  1. #1
    Join Date
    Jun 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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)

  2. #2
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

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

  3. #3
    Join Date
    Jun 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Thanks a lot, but it...

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

  4. #4
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

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

  5. #5
    Join Date
    Jun 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Aug 2004
    Posts
    9,911
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Please post a link to the page on your site that contains the problematic script so we can check it out.
    DD Admin

  7. #7
    Join Date
    Jun 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ok
    http://www.socialmedia-uah.es/

    Iīm still building it!!!

    Thanks!

  8. #8
    Join Date
    Jun 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Any sugerence?

    Thanks!!

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
  •