在 HTML5 个视频上叠加元素

Question

我对 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;
    }

无论我做什么，我都无法让文字显示在视频上。请注意，我必须将 position 更改为 relative 而不是 fiddle 中的 absolute ] 让它工作。我究竟做错了什么？任何建议表示赞赏。

Answer 1

感谢大家花时间回复。经过进一步检查，我发现控制台出现以下错误：

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

我让我的服务器猜测 mime-type 静态内容，因为它在过去已经正确地完成了，但它似乎做得不对。

为了解决这个问题，我重写了我附加在这里的静态传递函数，以防以后有人遇到同样的问题：

@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 个视频上叠加元素

Overlaying elements over HTML5 video

html

javascript

css

python

html5-video