如何在背景視頻上疊加文字？

Question

我正在嘗試使用 div 標簽為我的網站使用不同的視頻，我還想覆蓋要顯示的文本。 但是每當我做一些事情並在 div 中使用另一個視頻作為背景時，它就會只顯示一個完整的<html>視頻，而不是另一個。
我的代碼如下。

<div class="video-overlay"></div>

<video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

現在，如果我放了另一個背景視頻，那么它就不會顯示……只有第一個視頻才會顯示。

Answer 1

 .container { position:relative; } .container video { position:relative; z-index:0; } .overlay { position:absolute; top:0; left:0; z-index:1; }

 <div class="container"> <video id="video" width="770" height="882" onclick="play();"> <source src="video/Motion.mp4" type="video/mp4" /> </video> <div class="overlay"> <p>Content above your video</p> <form> <p>Content Below Your Video</p> <label for="input">Form Input Label</label> <input id="input" name="input" value="" /> <button type="submit">Submit</button> </form> </div> </div>

或

<video loop autoplay muted poster="path/to/screenshot.jpg">
    <source src="path/to/video.webm" type="video/webm">
    <source src="path/to/video.ogg" type="video/ogg">
    <source src="path/to/video.mp4" type="video/mp4">
</video>

Answer 2

您可以簡單地使用 CSS。

 .video-overlay{ position:absolute; z-index:9999999999; }

 <div class="video-overlay">Any Text</div> <video class="sqs-html5-video" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster.jpg" autoplay loop><source src="vid/1.mp4" type="video/mp4"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/sp-poster-old-ie.jpg" class="ie8-poster"</video><div class="text-copy"><h1>Fullscreen Video w/overlay</h1></div>

如何在背景視頻上疊加文字？

問題描述

2 個解決方案

解決方案1
2 2016-10-23 14:59:40

解決方案2
0 2016-10-23 14:57:39

如何在背景視頻上疊加文字？

問題描述

2 個解決方案

解決方案1 2 2016-10-23 14:59:40

解決方案2 0 2016-10-23 14:57:39

解決方案1
2 2016-10-23 14:59:40

解決方案2
0 2016-10-23 14:57:39