嵌入式Youtube视频自动播放 - 在图像sildeshow

时间:2015-08-09 09:11:44

标签: javascript jquery css3 youtube slideshow

寻找一些帮助,以便在图片幻灯片中以youtube的形式将视频嵌入到项目编号4中。最终的结果应该是播放前3个图像,一旦它到达第4个项目,它应该自动播放视频,一旦视频完成,它应该在幻灯片放映的下一个图像上移动。

我的网站是www.serenitygardenrooms.com

我的代码片段无效:

<section id="home-slider" class="flexslider fullbg"
 style="background-image:url(img/slide/home/1_1_.jpg); height:600px; padding:0px;">

                                           花葶。范围。样式。语境。             

        <p class="home-slide-content bounceIn animated" data-wow-delay="0.5s" data-wow-duration="10s">
            We <span class="highlight">build</span> it
        </p>
    </div>
</li>
<li class="home-slide">
    <div class="flex-caption transparent light-font center flexslider fullbg" style="background-image:url(img/slide/home/2.jpg); height:600px; width:100%; padding:0px; margin-top:0px;">
        <p class="home-slide-content bounceInLeft animated" data-wow-delay="0.5s" data-wow-duration="10s" style="margin-top:150px;">
            Scape. <span class="highlight">Scope.</span> Style.<span class="highlight"> Context.</span>
        </p>

        <p class="home-slide-content bounceIn animated" data-wow-delay="0.5s" data-wow-duration="10s">
            We <span class="highlight">build</span> it
        </p>
    </div>
</li>
<li class="home-slide">
    <div class="flex-caption transparent light-font center flexslider fullbg" style="background-image:url(img/slide/home/3.jpg); height:600px; width:100%; padding:0px; margin-top:0px;">
        <p class="home-slide-content bounceInLeft animated" data-wow-delay="0.5s" data-wow-duration="10s" style="margin-top:150px;">
            Scape. <span class="highlight">Scope.</span> Style.<span class="highlight"> Context.</span>
        </p>

        <p class="home-slide-content bounceIn animated" data-wow-delay="0.5s" data-wow-duration="10s">
            We <span class="highlight">build</span> it
        </p>
    </div>
</li>
<li class="home-slide">
    <div class="flex-caption transparent light-font center flexslider fullbg" style="background-image:url(img/slide/home/4.jpg); height:600px; width:100%; padding:0px; margin-top:0px;">
        <iframe src="https://www.youtube.com/watch?v=WyjK8mjhjb4?autoplay=1" width="100%" height="600px" frameborder="0" allowfullscreen></iframe>
    </div>
</li>

1 个答案:

答案 0 :(得分:1)

您需要一个事件来捕捉HTML5视频中的已结束事件。 还有一个类似的问题:

Event when youtube video finished