Question

我有一个parrallax滑块，我只在滑块上放了图片和描述，我想添加一个视频，这是我的代码：

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

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

我目前正在使用此滑块：

Yii2 Da-Slider

我想：

将其添加到第一张幻灯片
将其设置为自动播放
视频播放结束后，我希望滑块自动恢复并移动到下一张幻灯片。

我该怎么做？

Answer 1

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

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

上传YouTube视频后，您可以点击视频下方的“分享”按钮，然后点击“嵌入”，将其添加到幻灯片中。这将为您提供一个代码片段，您可以在上面的滑块代码中使用它：

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

注意最后的rel=0。一旦你的视频完成播放，就会停止建议其他视频，这会让整个视频变得更专业。如果您希望它立即开始播放，您也可以添加autoplay=1。您还可以在控制视频播放器的镶边（边缘周围的皮肤）的地方进行更高级的集成。

Answer 2

我之前用视差完成了这项工作，看起来很神奇。

我更喜欢这种方法，比如Youtube或Vimeo这样的服务，因为你有更多的控制权，并且可以根据你的需要更有效地设计它。

您希望以mp4和ogg格式获取视频。您可以使用VLC媒体播放器执行此操作。免费。

然后我使用了html5 <video>标记（Link Here）。这是一个样本。你需要在CSS中为位置等设置样式。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

如何在视差滑块中添加视频？

2 个答案: