javascript - 在全屏视频上放置文本 (HTML5)

Question

我想在 HTML 格式的全屏视频上放置文本。

我可以将其设置为非全屏，但它无法全屏工作。

有什么办法吗？

我对文本使用 position:absoulute，对视频使用 position:relative/fixed/none。

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

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

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

Answer 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();