覆蓋HTML5視頻上的元素

我對CSS和HTML5比較陌生，希望看到如何在視頻上疊加HTML文本或其他元素。我繼承並修改了某人的代碼，當我在JSFiddle上玩弄它時，它似乎正常工作 - https://jsfiddle.net/jxavLps5/但我通過我的本地瓶（WSGI）服務器託管時無法使其正常工作。我有以下HTML：覆蓋HTML5視頻上的元素

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Example</title> 
    <link rel="stylesheet" href="/static/css/container.css" type="text/css" charset="utf-8"> 
    </head> 

    <body> 
    <div class="container-module"> 
     <div class="video-container"> 
      <div class="title-container"> 
       <h1>Bug Buck Bunny - Trailer</h1> 
      </div> 
      <video autoplay loop class="fillWidth"> 
       <source src="http://video.webmfiles.org/big-buck-bunny_trailer.webm" type="video/webm" /> Upgrade browser 
       <source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type = "video/mp4" /> Upgrade browser 
      </video> 
     </div> 
    </div> 
    </body> 
    </html>

我的CSS是在這裏：

html, body{ 
     font-family: 'Open Sans', sans-serif !important; 
     margin: 0; 
    } 
    .container-module { 
     border-right: none; 
     border-left: none; 
     position: relative; 
    } 
    .video-container { 
     position: relative; 
     bottom: 0%; 
     left: 0%; 
     height: 100%; 
     width: 100%; 
     overflow: hidden; 
     background: #000; 
    } 
    .video-container .title-container { 
     z-index: 2147483647; 
     position: absolute; 
     top: 35%; 
     width: 100%; 
     text-align: center; 
     color: #ff0; 
    } 

    .video-container video { 
     position: absolute; 
     z-index: 100; 
     bottom: 0; 
    } 
    .video-container video.fillWidth { 
     width: 100%; 
    } 
    .no-video .video-container video, 
    .touch .video-container video { 
     display: none; 
    } 
    .no-video .video-container .poster, 
    .touch .video-container .poster { 
     display: block !important; 
    }

不管我做什麼，我不能得到的文本出現在視頻。請注意，我不得不將的位置改爲相對而不是絕對在小提琴中得到它的工作。我究竟做錯了什麼？任何意見讚賞。

來源

2016-01-14 Tilted Perspective

'位置：absolute'在你的提琴工作 - 是有一些原因該解決方案不會爲你做？在這種情況下使用它沒什麼問題 - 這是使一個元素與另一個元素重疊的唯一方法之一。完美的使用案例。 – ingridly

@ingridly感謝您的評論。我的意思是'.video-container video位置：絕對; z-index：100; '在我的小提琴中不起作用。無論如何，即使我的小提琴不會在我的服務器上產生相同的結果。 –

您可以使用Chrome瀏覽器中開發人員面板上的「源代碼」選項卡來檢查您是否正確獲取文件（檢查內容）。這可能是因爲你的服務器沒有正確提供它們。您也可以通過檢查CSS來檢查CSS是否正確應用於元素。 – Govinda

謝謝你們花時間回覆。經進一步檢查，我發現控制檯被吐出以下錯誤：

Resource interpreted as Stylesheet but transferred with MIME type text/html

我已經讓我的服務器的猜測MIME類型的靜態內容，因爲它在過去做了適當的，但現在看來它沒有這樣做對。

要解決這個問題，我改寫了這我附上這裏萬一有人我靜交付函數運行到同一更高版本：

@welcomeApp.route('/static/<filepath:path>') 
def send_static(filepath): 
     currentLocation = os.path.dirname(os.path.realpath(__file__)) 
     staticPath = currentLocation + '/static/' 
     if '.mp4' in filepath: 
      mime = 'video/mp4' 
     elif '.webm' in filepath: 
      mime = 'video/webm' 
     elif '.css' in filepath: 
      mime = 'text/css' 
     else: 
      mime = None 
     return static_file(filepath, root=staticPath, mimetype= mime)

來源

2016-01-18 01:59:52

覆蓋HTML5視頻上的元素

回答

相關問題