Question

我对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 而不是绝对才能使其正常工作。我究竟做错了什么？任何建议表示赞赏。

Answer 1

谢谢你们花时间回应。经过进一步检查，我发现控制台正在吐出以下错误：

资源解释为样式表但使用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 )

覆盖HTML5视频上的元素

1 个答案: