在 HTML5 视频上方添加文本

Posted

技术标签:

【中文标题】在 HTML5 视频上方添加文本【英文标题】:Add text above HTML5 Video 【发布时间】:2012-05-12 10:05:43 【问题描述】:

在顶部添加文本需要帮助,因此文本覆盖了 html 5 视频,我还需要添加表单输入和按钮,下面是我的 HTML5 视频代码。

<video id="video"   onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>

【问题讨论】:

【参考方案1】:

您肯定在寻找更多:

<div class="container">
    <video id="video"   onclick="play();">
        <source src="video/Motion.mp4" type="video/mp4" />
    </video>
    <div class="overlay">
        <p>Content above your video</p>
        <form>
            <p>Content Below Your Video</p>
            <label for="input">Form Input Label</label>
            <input id="input" name="input" value="" />
            <button type="submit">Submit</button>
        </form>
    </div>
</div>

如果你想把内容放在视频的顶部,你会使用某种定位:

.container  position:relative; 
.container video 
    position:relative;
    z-index:0;

.overlay 
    position:absolute;
    top:0;
    left:0;
    z-index:1;

【讨论】:

您好,我的意思是视频上方的文字或视频上方的浮动 更新示例以满足您的需求。 Here's a working example,但是手头没有支持 MP4 的浏览器 感谢 Robertc 和 Matthew.. 这对我有很大帮助 这将覆盖整个页面。虽然不是一个好的解决方案。但视野开阔。谢谢。【参考方案2】:

您可以使用顶部和左侧位置来表示百分比。因为它会在窗口内容大小发生变化时自动调整顶部文本

<div class="container">
    <video id="video"   onclick="play();">
        <source src="video/Motion.mp4" type="video/mp4" />
    </video>
    <div class="overlayText">
        <p id="topText">Content above your video</p>
    </div>
</div>`enter code here`

#overlayText 
 position:absolute;
  top:30%;
  left:20%;
  z-index:1;


#topText 
  color: white;
  font-size: 20px;
  align-self: center;

【讨论】:

以上是关于在 HTML5 视频上方添加文本的主要内容,如果未能解决你的问题,请参考以下文章

HTML5视频加载完成后如何使文本消失?

HTML 5 视频播放状态覆盖

html5:在控件视频中添加下载按钮

在 javascript 中向 HTML5 视频添加源?

iPad Safari 忽略 html5 视频上方的 div onclick

仅在视频播放时进行视频控制 (html5)