logo标签列表

在全屏视频上添加文本（HTML5）

javascripthtmlcssvideo
6

我希望在HTML的全屏视频上放置文本。

我可以将其设置为非全屏，但在全屏模式下无法工作。

有没有办法做到这一点？

我使用position:absolute来设置文本位置，使用position:relative/fixed/none来设置视频位置。

另外，我不知道它是否有效，但我调用了.requestFullscreen();函数来让浏览器全屏，不幸的是我无法调整视频大小。

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

视频标签的宽度和高度正在更改，但视频并没有更改。

我们可以在 jsfiddle 中看到你的代码吗？ - Steevan
请在jsFiddle.net上发布一个演示。我遇到了你所描述的问题，但如果我能看到你已经做过的事情，那就更好了，这样我就不必“重新发明轮子”了。 - zer00ne
3个回答
3
您可以使用 iframe 在 Youtube 和 Vimeo 上实现响应式嵌入，使用对象嵌入在 Viddler 和 Blip.tv 上进行嵌入。有一篇文章将其解释得很好在这里，代码可在 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
}
0

你可以通过几种不同的方式来实现这一点。我认为最简单的方法是创建一个宽度为100％的 div，在 div 中响应式地嵌入视频，然后将文本绝对定位在 div 的中心。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接