如何在視差滑塊中添加視頻？

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

如何在視差滑塊中添加視頻？

回答

相關問題