在 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 视频上方添加文本的主要内容,如果未能解决你的问题,请参考以下文章