我对 CSS 和 HTML5 比较陌生，想了解如何在视频上叠加 HTML 文本或其他元素。我继承并修改了某人的代码，当我在 JSFiddle 上使用它时它似乎可以正常工作 - https://jsfiddle.net/jxavLps5/但我无法在通过我的本地 Bottle (WSGI) 服务器托管时让它正常工作。我有以下 HTML:
<!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;
}
无论我做什么，我都无法让文本显示在视频上。请注意，我必须将 fiddle 中的 position 更改为 relative 而不是 absolute 才能使其正常工作。我究竟做错了什么？任何建议表示赞赏。
最佳答案
感谢大家花时间回复。经过进一步检查，我发现控制台出现以下错误:
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 )
关于javascript - 在 HTML5 视频上叠加元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34797925/