javascript - 在HTML5视频上叠加元素

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

无论我做什么，我都无法在视频上显示文字。请注意，为了使它起作用，我不得不将位置更改为相对而不是绝对。我究竟做错了什么？任何建议表示赞赏。

最佳答案

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

资源解释为样式表，但以MIME类型传输
文字/ 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/