html5中以视频为中心的文本答案

【问题标题】：Text centered over video in html5html5中以视频为中心的文本
【发布时间】：2015-06-10 20:48:51
【问题描述】：

我的容器 div 包含一个视频和一个带有一些文本的 div。

我希望文本位于视频上方并位于中心位置，当我调整浏览器窗口大小时也是如此。

我意识到这一点demo，但我认为这只是一个起点.. 我该如何改进我的代码？

这里是代码。

/**CSS**/

video {
  position:relative;
  z-index:-1;
}

#custom-message {
  position:relative;
  color: rgb(230, 200, 98);
  z-index:1;
  top: -200px;       
}

<!--**HTML**-->

<div id="container" align="center">
  <video width="640" height="320" autoplay>
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
  </video>
  <div id="custom-message">CENTERED TEXT ABOVE</div>
</div>

【问题讨论】：

可以修改HTML吗？只需将#custom-message 放在 HTML 中的 video 上方就可以完全按照您的意愿工作（前提是您删除了相对值

标签： javascript jquery css html html5-video

【解决方案1】：

在此处查看 sn-p： DEMO

var $vid = $('video','#container');
var $msg = $('#custom-message'); 
$msg.css({
    top:$vid.offset().top + (($vid.height()/2) - ($msg.height()/2)),
    left:$vid.offset().left + (($vid.width()/2) - ($msg.width()/2))
});

【讨论】：

【解决方案2】：

好的，z-index: -1 会在 Firefox 中搞砸。使用这个：

<div id="video-container">
// all the video stuff goes in here.
<a id="your-text"></a>
</div>

#video-container {
   text-align: center;
   height: 400px;//or whatever you want
   line-height:400px;//should be equal to the height
   position: ..
   z-index: 1;
}

#custom-message {
    position: relative;
    display: inline-block;
    height:..;
    width:..;
    z-index: 10;
}

最好的方法是使用 JavaScript。无论如何都需要使用z-index，所以将视频容器相对定位，自定义消息绝对，但在视频容器内部，然后简单地使用JavaScript计算自定义消息的left和top。下面是原始 JavaScript（无库）的处理方式。

window.onload = funciton() {
    var video = document.getElementById('video-container');
    var customMessage = document.getElementById('custom-message');
    var customMessageTop = video.offsetHeight / 2 - customMessage.offsetHeight / 2;
    var customMessageLeft = video.offsetWidth / 2 - customMessage.offsetWidth  / 2;
    customMessage.style.left = customMessageLeft + 'px';
    customMessage.style.top = customMessageTop + 'px';
};

或者如果你已经在使用 jQuery 来处理你的东西。

$(function() {
    $('#customMessage').css({
        top: $('#video').height() / 2 - $('#customMessage').height() / 2,
        left: $('#video').width() / 2 - $('#customMessage').width() / 2
    });
});

【讨论】：

【解决方案3】：

css:

video {
    position:relative;
    z-index:-1;
}

#custom-message {
    position:relative;
    color: rgb(230, 200, 98);
    z-index:1;
    top: 0;
    text-align: center;    
}

html:

<div id="container" align="center">
     <div id="custom-message">CENTERED TEXT ABOVE</div>

    <video width="640" height="320" autoplay>
      <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"/>
    </video>
</div>

【讨论】：