stop video en una slide

[maverick3134]

hola a todos, primero k nada agradesco a las personas por la paciencia y la gentileza k nos bridan al ayudarbos a solucionar los problemas de mundo del web.


tengo una slide y e puesto al interno 4 videos, mi problema surge cuando miro el primer video (play) y luego hago next para ir al segundo video ...el primero sigue sonando y no hace el stop y asi sucesivamente con los cuantro. quisiera saber si hay forma de parar el video cuando hago scroll o cuando hace scroll en automatico.

otra cosa no se si modificar la configuracion de flowplayer o la slide..

(como player uso flowplayer). gracias de antemano

url: http://sportube.tv/slidedual.php

codigo: html

<div id="inner_wrapper">

<div class="carousel clearfix">

<div class="panel">

<div class="details_wrapper">

<div class="details">

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Sportube 1</a> Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Sportube 2</a> sit amet, consectetuer adipiscing elit. </h2>
<a href="#" title="Read more" class="more">Read more</a>
</div>

<!--detail-->

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Pallavolo</a>. Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->

<div class="detail">
<h2 class="Lexia-Bold"><a href="#">Ondemand</a>. Cum sociis natoque penatibus et magnis dis parturient montes</h2>
<a href="#" title="Read more" class="more">Read more</a>
</div><!-- /detail -->


</div><!-- /details -->

</div><!-- /details_wrapper -->

<div class="paging">
<div id="numbers"></div>
<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
<a href="javascript:void(0);" class="next" title="Next">Next</a>
</div><!-- /paging -->

<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>

</div><!-- /panel -->

<div class="backgrounds">

<div id="1" class="item item_1">

<a href="http://www.cesar-andavisa.com/videos/sportube.flv" style="display:block;width:705px;height:340px;" class="player">
</a>
<script language="JavaScript">

$f("a.player", {src: 'player/flow_player/flowplayer.commercial-3.2.2-0.swf', wmode: 'opaque'}, { key: '#@95644ee0ff92c2cc476',
clip: {
autoPlay: false,
autoBuffering: true
}

});

</script>

</div><!-- /item -->

<div id="2" class="item item_2">
<a href="http://www.cesar-andavisa.com/videos/tennis.flv" style="display:block;width:705px;height:340px;" class="player">
</a>
</div><!-- /item -->

<div id="3" class="item item_3">
<a href="http://www.cesar-andavisa.com/videos/croazia_italia.flv" style="display:block;width:705px;height:340px;" class="player">
</a>
</div><!-- /item -->

<div id="4" class="item item_4">
<a href="http://www.cesar-andavisa.com/videos/Inter_chelsea.flv" style="display:block;width:705px;height:340px;" class="player">
</a>
</div><!-- /item -->

</div><!-- /backgrounds -->


</div>

</div>

[maverick3134]

ste es el codigo javascript...

codigo javascript:


(function($) {

$.fn.dualSlider = function(options) {

// default configuration properties
var defaults = {
auto: true,
autoDelay: 10000,
easingCarousel: 'swing',
easingDetails: 'easeOutBack',
durationCarousel: 1000,
durationDetails: 600
};

var options = $.extend(defaults, options);

this.each(function() {

var obj = $(this);
var carousel;
var carouselTotal = $(".backgrounds", obj).children().length;
var carouselPosition = 1;
var carouselLinkIndex = 1;
var carouselLinks = "";
var carouselwidth = $(obj).width();
var detailWidth = $(".panel .details_wrapper", obj).width();
var locked = false;

if(options.auto == true)
{
//Creat duplicates for seamless looping
$(".backgrounds", obj).prepend($(".backgrounds .item:last-child", obj).clone().css("margin-left", "-" + carouselwidth + "px"));
$(".backgrounds", obj).append($(".backgrounds .item:nth-child(2)", obj).clone());

$(".details", obj).prepend($(".details .detail:last-child", obj).clone().css("margin-left", "-" + detailWidth + "px"));
$(".details", obj).append($(".details .detail:nth-child(2)", obj).clone());
}
else{
$(".previous", obj).hide();
$(".play, .pause", obj).hide();
}


//Set main background width
$(".backgrounds", obj).css("width", ((carouselTotal+1) * carouselwidth) + 100 + "px");


//Set main detail width
$(".details_wrapper .details", obj).css("width", ((carouselTotal+1) * carouselwidth) + "px");

for (i = 1; i <= carouselTotal; i++) {
(i == 1) ? carouselLinks += "<a rel=\"" + carouselLinkIndex + "\" title=\"Go to page " + carouselLinkIndex + " \" class=\"link" + carouselLinkIndex + " selected\" href=\"javascript:void(0)\">" + carouselLinkIndex + "</a>" : carouselLinks += "<a rel=\"" + carouselLinkIndex + "\" title=\"Go to page " + carouselLinkIndex + " \" class=\"link" + carouselLinkIndex + "\" href=\"javascript:void(0)\" >" + carouselLinkIndex + "</a>";
carouselLinkIndex++;
}
$("#numbers", obj).html(carouselLinks);

//Bind carousel controls
$(".next", obj).click(function() {
carouselPage(parseInt(carouselPosition + 1), false);
lock();
});

$(".previous", obj).click(function() {
carouselPage(parseInt(carouselPosition - 1), false);
lock();
});

$("#numbers a", obj).click(function() {
carouselPage($(this).attr("rel"), false);
lock();
});

$(".pause", obj).click(function() {
autoPause();
});
$(".play", obj).click(function() {
autoPlay();
});

function lock() {
locked = true;
}

function unLock() {
locked = false;
}


function checkPreviousNext() {
$("#numbers a", obj).removeClass("selected");
$("#numbers .link" + carouselPosition, obj).addClass("selected");

if(options.auto == false)
{
(carouselPosition == carouselTotal) ? $(".next", obj).hide() : $(".next", obj).show();
(carouselPosition < 2) ? $(".previous", obj).hide() : $(".previous", obj).show();
}
}

function adjust() {

if (carouselPosition < 1) {

$(".backgrounds", obj).css("margin-left", (-1 * ((carouselTotal - 1) * carouselwidth)));
$(".details", obj).css("margin-left", (-1 * ((carouselTotal - 1) * detailWidth)));
carouselPosition = carouselTotal;

}
if (carouselPosition > carouselTotal) {

$(".backgrounds", obj).css("margin-left", 0);
$(".details", obj).css("margin-left", 0);
carouselPosition = 1;
}

}

function carouselPage(x, y) {

if (locked != true) {

//console.log("New page: " + x);
carouselPosition = parseFloat(x);
//Cancel timer if manual click
if (y == false) autoPause();

var newPage = (x * carouselwidth) - carouselwidth;
var newPageDetail = (x * detailWidth) - detailWidth;

if (newPage != 0) {
newPage = newPage * -1;
newPageDetail = newPageDetail * -1;
}

$(".backgrounds", obj).animate({
marginLeft: newPage
}, {
"duration": options.durationCarousel, "easing": options.easingCarousel,

complete: function() {

//Now animate the details
$(".details", obj).animate({
marginLeft: newPageDetail
}, {
"duration": options.durationDetails, "easing": options.easingDetails,
complete: function() {
//alert("finished details");
adjust();
checkPreviousNext();
unLock();
}

});
//adjust();
//checkPreviousNext();
//unLock();
}
});



}


}

function autoPause() {
$(".pause", obj).hide();
$(".play", obj).show();
$("body").stopTime("autoScroll");
}

function autoPlay() {
$(".pause", obj).show();
$(".play", obj).hide();
$("body").everyTime(options.autoDelay, "autoScroll", function() {
carouselPage(carouselPosition + 1, true);
lock();
});
}

if (options.auto == true) {
autoPlay();
}

});

};

})(jQuery);


llamada de la slide en el html:

<script type="text/javascript">

$(document).ready(function() {

$(".carousel").dualSlider({
auto:true,
autoDelay: 6000,
easingCarousel: "swing",
easingDetails: "easeOutBack",
durationCarousel: 1000,
durationDetails: 500
});

});


</script>



espero k alguien pueda ayudarme muchas gracias