【问题标题】:Embedded Youtube Video Autoplay - In the middle of an image sildeshow嵌入式 Youtube 视频自动播放 - 在图像幻灯片中间
【发布时间】:2015-11-01 08:52:18
【问题描述】:

寻求一些帮助,以从 youtube 嵌入视频,作为图像幻灯片中的第 4 项。最终结果应该是播放前 3 个图像,一旦到达第 4 个视频项,它应该自动播放它,一旦视频完成,它应该移动到幻灯片中的下一个图像的顶部。

我的网站是 www.serenitygardenrooms.com

我的代码 sn-p 不工作是:

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

【问题讨论】:

    标签: javascript jquery css youtube slideshow


    【解决方案1】:

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

    Event when youtube video finished

    【讨论】:

      猜你喜欢
      • 2018-12-16
      • 1970-01-01
      • 1970-01-01
      • 2017-11-03
      • 2021-02-19
      • 2021-05-31
      • 1970-01-01
      • 2018-05-25
      • 2021-05-01
      相关资源
      最近更新 更多