需要 HTML 协助答案

【问题标题】：HTML Assistance needed需要 HTML 协助
【发布时间】：2015-04-08 10:51:14
【问题描述】：

只是想知道如何在此视频前面添加文字，看看它是用于一个名为 Squiddinc 的东西，我想要巨大的文字说它，这是我到目前为止所做的事情

<html>
    <head>
        <title>OFFICIAL SQUIDDINC</title>
    </head>
    <style>

    video{
        min-width:100%;
        min-height:100%;
    }

    </style>
    <body>
<audio autoplay loop>
<source src="./bgmusic.mp3">
</audio>
<video autoplay loop>
<source src="./bg.mp4" type="video/mp4">
</video>

<html>

【问题讨论】：

stackoverflow.com/questions/10422105/add-text-above-html5-video - 看看这个，我想这正是你要找的
不，希望有文字覆盖视频

标签： html

【解决方案1】：

放置另一个元素（比如div）并将css设置为固定位置

       <html>
             <head>
            <title>OFFICIAL SQUIDDINC</title>
           <style>
             .overlay{
            width:400px;
            height:auto;
            position:fixed;
            left:10px;
            top:20px;
            opacity:0.7;
            }
                video{
                    min-width:100%;
                    min-height:100%;
                }

                </style>
                </head>                   
          <body>
            <video autoplay loop>
            <source src="./bg.mp4" type="video/mp4">
            </video>        
            <div class="overlay"></div>
        </body>        
       </html>

【讨论】：

【解决方案2】：

检查这个小提琴，http://jsfiddle.net/robinat130/jppr4thh/1/

<body>
<audio autoplay loop>
<source src="./bgmusic.mp3">
</audio>
<video autoplay loop>
<source src="http://devimages.apple.com/iphone/samples/bipbop/gear1/prog_index.m3u8" type="video/mp4">
</video>
    <div class="overlay">
        <h1>Content above your video</h1>         
    </div>
</body>



video{
        min-width:100%;
        min-height:100%;
    position:relative;
    z-index:0;
    }

.overlay {
    position:absolute;
    top:180px;
    left:200px;
    z-index:1;
}
.overlay h1 { color:white; margin:auto; }

【讨论】：