在全屏视频上添加文字 (HTML5)答案

【问题标题】：Put a text on fullscreen video (HTML5)在全屏视频上添加文字 (HTML5)
【发布时间】：2015-07-24 14:48:31
【问题描述】：

我想将文本放在 HTML 格式的全屏视频中。

我可以让它非全屏，但它不能在全屏上工作。

有什么办法吗？

我将position:absoulute 用于文本，position:relative/fixed/none 用于视频。

我也不知道它是否有效，但我不高兴地为浏览器调用了 .requestFullscreen(); 函数，我无法调整视频大小。

如果.requestFullscreen(); 有效。我需要调整视频大小。

视频标签的宽度和高度在变化，但视频没有变化。

【问题讨论】：

我们可以把你的代码放在小提琴里吗？
请在 jsFiddle.net 上发布一个演示。正如您所描述的那样，我遇到了麻烦，但是如果我能看到您已经完成的工作就更好了，这样我就不必“重新发明轮子”

标签： javascript html css video

【解决方案1】：

您可以使用带有 iframe 的 Youtube 和 vimeo 以及带有对象嵌入的 Viddler 和 Blip.tv 进行响应式嵌入。有一篇文章对此进行了解释here，代码可在github 上获得

Youtube 的示例代码（使用 jquery）：

// Find all YouTube videos
var $allVideos = $("iframe[src^='//www.youtube.com']"),

    // The element that is fluid width
    $fluidEl = $("body");

// Figure out and save aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)

    // and remove the hard coded width/height
    .removeAttr('height')
    .removeAttr('width');

});

// When the window is resized
$(window).resize(function() {

  var newWidth = $fluidEl.width();

  // Resize all videos according to their own aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Kick off one resize to fix all videos on page load
}).resize();

【讨论】：

【解决方案2】：

之前遇到过这个问题，但最终代码非常简单（我仍然花了很长时间才弄清楚并获得正确的平衡）https://jsfiddle.net/tonytansley/xwuuttdt/

只是一点点绝对定位，并使用百分比作为宽度高度和填充。

<body>
    <div id="outer">
        <div id="home-top-video">
            <video autoplay loop width="100%">
                <source src="http://view.vzaar.com/2710053.mp4" type="video/mp4"/>
                <source src="http://view.vzaar.com/2710053.ogg" type="video/ogg"/>
                <source src="http://view.vzaar.com/2710053.webm" type="video/webm"/>
            Your browser does not support the video tag. We suggest you upgrade your browser.
            </video>
            <div id="home-text">
                    <h1>text</h1>
                    <h3>subtext</h3>
             </div>
        </div>
    </div>
</body>

css

#outer{
    width:100%;
    display:block;
    text-align:center;
    position:relative;
    overflow: hidden;
    height:10000px;
    min-height:100%;
}
#home-top-video{
    left:0%;
    top:0%;
    height:100%;
    width:100%;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
#home-text{
    left:0%;
    top:0;
    height:100%;
    width:100%;
    padding-top:10%;
    overflow: hidden;
    position: absolute;
    z-index: 0;
    color:white
}

【讨论】：

【解决方案3】：

您可以通过几种不同的方式实现这一目标。我相信最简单的方法是创建一个 100% 宽度的 div，将视频响应式嵌入到 div 中，然后将文本绝对定位在 div 的中心。

【讨论】：