javascript - 如何在视差 slider 中添加视频？

Question

我有一个视差 slider ，我只在 slider 上放了图片和描述，我想添加一个视频，这是我的代码:

{ <div id="da-slider" class="da-slider">
    <div class="da-slide">
        <h2>Vidéo PUB</h2> 
        <p>loading</p> <!--wanna put the video here -->
    </div>
    <div class="da-slide">
        <h2>Affréteurs</h2>
        <p></p>
        <div class="da-img"><img src="" alt="" /></div>
   </div> }

我的问题是视频是静态的。

我目前正在使用这个 slider :

• > Yii2 Da-Slider

我想:

1. 将其添加到第一张幻灯片
2. 设置为自动播放
3. 视频播放完毕后，我希望 slider 自动恢复并移至下一张幻灯片。

我该怎么做？

Answer 1

我建议您设置一个 YouTube 帐户来托管您的视频。

如果该网站很受欢迎，那么它会将提供视频文件的压力转移到 YouTube 快速的专用服务器上。

上传 YouTube 视频后，您可以通过单击视频下方的“共享”按钮然后单击“嵌入”将其添加到幻灯片中。这将为您提供一段这样的代码，您可以在上面的 slider 代码中使用它:

<iframe width="560" height="315" src="https://www.youtube.com/embed/_dJCLaoBZvM?rel=0" frameborder="0" allowfullscreen></iframe>

注意最后的 rel=0。一旦您的视频播放完毕，它就会停止建议其他视频，从而使整个过程更加专业。如果您希望它立即开始播放，您还可以添加 autoplay=1。还有更高级的集成，您可以在其中控制视频播放器的镶边(边缘周围的皮肤)。