我对CSS和HTML5比较陌生，想看看如何在视频上叠加HTML文本或其他元素。我继承并修改了某人的代码，当我在JSFiddle上使用它时它似乎正常工作 - https://jsfiddle.net/jxavLps5/但是当我通过我的本地瓶（WSGI）服务器托管时，我无法正常工作/ strong>即可。我有以下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;
}
无论我做什么，我无法将文字显示在视频上。请注意，我必须在小提琴中将位置更改为 relative 而不是绝对才能使其正常工作。我究竟做错了什么？任何建议表示赞赏。
答案 0 :(得分：0)
谢谢你们花时间回应。经过进一步检查，我发现控制台正在吐出以下错误：
资源解释为样式表但使用MIME类型传输 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 )