Safari中出错

Question

我的幻灯片中有一个带有youtube视频的iframe，他开始在幻灯片中自动播放，然后在20秒后他停止播放并更改另一个带有其他信息的滑块。在chrome和firefox中滑块工作正常，但在 safari 视频不隐藏，他继续出现在其他滑块中。我该怎么办？

http://cooptaxis.pt/index_teste.php

我的剧本：

<script type="text/javascript">

var revapi;
jQuery(document).ready(function() {
revapi = jQuery('.tp-banner').revolution(
{
delay:20000,
startwidth:1170,
startheight:500,
hideThumbs:10,
});

$('.tp-bullets').find('div.bullet').bind('click', function(){
var url = $('.video1').attr('src');
url = url.replace(/autoplay=1&/g, '');
$('.video1').attr('src', '');
$('.video1').attr('src', url);
});

$('.tparrows').bind('click', function(){
var url = $('.video1').attr('src');
url = url.replace(/autoplay=1&/g, '');
$('.video1').attr('src', '');
$('.video1').attr('src', url);
});
}); //ready
</script>


<div class="tp-banner-container">
        <div class="tp-banner" >
            <ul>    
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                    <!-- MAIN IMAGE -->
        <img src="images/slide/ponte.png"  alt="ponte"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                  <div class="tp-caption customin skewtoleft"
                        data-x="125"
                        data-y="15"
                        data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="600"
                        data-start="1500"
                        data-easing="Back.easeOut"
                        data-endspeed="400"
                        data-endeasing="Back.easeIn"
                        style="z-index: 1"><img src="images/slide/taxiclick-1.png" alt="">
                    </div>

                    <div class="tp-caption skewfromleft"
                        data-x="644"
                        data-y="40"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="2200"
                        data-easing="Back.easeOut"
                        data-endspeed="500"
                        data-endeasing="Back.easeIn"
                        style="z-index: 2"><img src="images/slide/smartphone.png" alt="">
                    </div>



                    <!-- LAYER NR. 7 -->

                <div class="tp-caption customin customout"
                        data-x="center" data-hoffset="230"
                        data-y="center" data-voffset="90"
                        data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="600"
                        data-start="1000"
                        data-easing="Power4.easeOut"
                        data-endspeed="500"
                        data-endeasing="Power4.easeOut"
                        style="z-index: 3">
                <iframe class="video1" width="340" height="260" src="//www.youtube.com/embed/yxp4XV-3SLs?autoplay=1&html5=1" frameborder="0" allowfullscreen></iframe>

                        <!--<iframe src='http://player.vimeo.com/video/88055647?title=0&byline=0&portrait=0;api=1' width='340' height='260'
                       style='width:340px;height:260px;'>
            </iframe>-->




                        <!--<iframe src='http://player.vimeo.com/video/88055647?title=0&byline=0&portrait=0;api=1' width='340' height='260'
                       style='width:340px;height:260px;'>
            </iframe>-->


                    </div>
                    <div class="tp-caption skewfromleft"
                        data-x="415"
                        data-y="317"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="2200"
                        data-easing="Back.easeOut"
                        data-endspeed="500"
                        data-endeasing="Back.easeIn"
                        style="z-index: 4"><a href="http://cooptaxis.pt/taxi-click.php"><img src="images/slide/sabermais.png" alt=""></a>
                    </div>

                </li>

                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                    <!-- MAIN IMAGE -->
                    <img src="images/slide/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                    <div class="tp-caption customin skewtoleft"
                        data-x="665"
                        data-y="14"
                        data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="600"
                        data-start="1500"
                        data-easing="Back.easeOut"
                        data-endspeed="400"
                        data-endeasing="Back.easeIn"
                        style="z-index: 5"><img src="images/slide/raparig2a_.png" alt="">
                    </div>


<div class="tp-caption skewfromleft"
                        data-x="90"
                        data-y="157"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="2200"
                        data-easing="Back.easeOut"
                        data-endspeed="500"
                        data-endeasing="Back.easeIn"
                        style="z-index: 6"><img src="images/slide/chamar_taxi.png" alt="">
                    </div>



                </li>
                <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                    <!-- MAIN IMAGE -->
                    <img src="images/slide/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                  <div class="tp-caption customin skewtoleft"
                        data-x="505"
                        data-y="0"
                        data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="600"
                        data-start="1500"
                        data-easing="Back.easeOut"
                        data-endspeed="400"
                        data-endeasing="Back.easeIn"
                        style="z-index: 7"><img src="images/slide/rato.png" alt="">
                    </div>


<div class="tp-caption skewfromleft"
                        data-x="110"
                        data-y="157"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="2200"
                        data-easing="Back.easeOut"
                        data-endspeed="500"
                        data-endeasing="Back.easeIn"
                        style="z-index: 8"><img src="images/slide/peca_taxi.png" alt="">
                    </div>



                </li>
                    <!-- SLIDE  -->
                <li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
                    <!-- MAIN IMAGE -->
                    <img src="images/slide/slidebg1.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
                    <!-- LAYERS -->

                    <!-- LAYER NR. 1 -->
                  <div class="tp-caption customin skewtoleft"
                        data-x="405"
                        data-y="0"
                        data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="600"
                        data-start="1500"
                        data-easing="Back.easeOut"
                        data-endspeed="400"
                        data-endeasing="Back.easeIn"
                        style="z-index: 10"><img src="images/slide/taxi.png" alt="">
                    </div>


<div class="tp-caption skewfromleft"
                        data-x="90"
                        data-y="197"
                        data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
                        data-speed="500"
                        data-start="2200"
                        data-easing="Back.easeOut"
                        data-endspeed="500"
                        data-endeasing="Back.easeIn"
                        style="z-index: 10"><img src="images/slide/2000profissionais.png" alt="">
                    </div>



                </li>




            </ul>
            <div class="tp-bannertimer"></div>
        </div>
    </div>