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

我有一个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

我想：

将它添加到第一张幻灯片
设置它，所以它自动播放
视频完成播放后，我想要滑块自动恢复并移动到下一张幻灯片。

我该怎么做？

来源

2015-05-14 user3070123

所以你想要一个html视频标签？ –

这是你的全部代码吗？ – evolutionxbox

我的问题是视频是静态的，我想得到它只是在第一张幻灯片，看完它后，我想自动移动到第二张幻灯片，所以它是如何风格？ – user3070123

我建议设置一个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。还有更高级的集成功能，您可以在控制视频播放器的镶边（边缘周围的皮肤）的情况下执行此操作。

来源

2015-05-14 09:50:35 rtpHarry

我的问题是视频是静态的，我想在第一张幻灯片中看到它，然后看它，我想自动移动到第二张幻灯片，所以如何设计它？ – user3070123

我以前用视差做过这件事，它看起来很神奇。

我更喜欢这种方法，像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>

来源

2015-05-16 18:51:41

我的问题是视频是静态的，我想在第一张幻灯片中看到它，然后看它，我想自动移动到第二张幻灯片，所以如何设计它？ – user3070123

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

回答

相关问题