在视频播放器顶部覆盖内容层[关闭]答案

【问题标题】：Overlay content layer on top of Video Player [closed]在视频播放器顶部覆盖内容层[关闭]
【发布时间】：2011-07-14 23:09:09
【问题描述】：

我想在正在流式传输某些视频上下文的视频播放器顶部覆盖一层。这可能吗？

所以该层将位于视频播放器的顶部，理想情况下它也可以具有透明度。

此外，当视频播放器“全屏”时，即。用户点击播放器上的全屏图标，图层也会移动/展开到相同的比例。

我想知道这是否可以使用 jquery 来实现？

有人可以指导我吗？是否可以？谁有例子吗？

感谢一百万！瑞恩

【问题讨论】：

可能只使用css。你有一些示例标记吗？

标签： jquery video mootools media-player layer

【解决方案1】：

这个问题似乎有两个不同的部分。

在视频播放器上显示透明 div
在全屏视图中扩展 div 以覆盖播放器

这一切皆有可能，但只有在某些条件下并需要大量工作。最重要的是，您需要控制视频播放器嵌入页面的方式，并且视频播放器需要有一个 Javascript API 来触发 div 的大小调整。

如果视频播放器是 Flash SWF，则只有在 SWF 的嵌入参数“wmode”设置为“不透明”（或“透明”）时才可能为 1。基本上 wmode 设置告诉 Flash 像普通的 HTML 元素一样工作，而不是通过位于它上面的任何东西显示。（更多关于这个here。）最重要的是，视频播放器的CSS“z-index”属性必须低于你的div的z-index。（z-index为堆叠顺序，0为最底层，1为上层。）

只要您的视频播放器容器具有 position:relative，您就可以在 CSS 中为您的 div 提供 position:absolute 并通过 top 和 left 属性将其相对于视频播放器定位。

使 div 透明当然也是可行的。但是，如果您希望它是半透明的，其中的内容是不透明的，它可能会变得有点复杂。这是CSS for transparency 上的一些内容以及jiggery-pokery 上的详细信息，您需要执行这些操作才能使内容显示inside a translucent div。

有一个示例here，其中元素已分层放置在 JW 媒体播放器之上，这将使您了解这部分是如何完成的。

2 需要一些 Javascript，它可以使用 JQuery 或 Mootools 来完成，或者只是简单的 Javascript。至关重要的是，视频播放器需要在将页面大小调整为全屏时告知页面的其余部分：当这种情况发生时，您的 Javascript 可以适当地调整 div 的大小。这是另一个不错的视频播放器 FlowPlayer 的一些代码，它显示了如何listen for the "onFullScreen" event。

$f("player1", "flowplayer.swf", {
    onFullScreen: function(){
        // div resizing stuff here
    }
});

在 onFullScreen 函数中，您可以放置调整 div 大小的代码。当播放器缩小时，您还需要使用另一个侦听器将其重新缩小。

【讨论】：

【解决方案2】：

也许这个 GitHub 资源可以提供帮助。这提供了 JWPlayer 所需的完整 Javascript 堆栈。 JWPlayer 是免费的，带有水印。

你可以使用 JWPlayer（它也是开源的）

你的 main.js 文件的内容=============== // 将插件引用和配置参数（'text'）传递给嵌入脚本

jwplayer('id-of-container').setup({
  file: '/path/to/my/video.mp4',
  plugins: {
    '/path/to/overlay.js': {
      text: 'Text that you want to go within the overlayed banner'
    }
  }
});

结束===============================

====overlay.js 文件内容==============

 (function( jwplayer ) {

  var overlay = function( player, config, div ) {

    var setupOverlay = function() {
      div.innerHTML = config.text;
    };

    var showOverlay = function() {
      setStyle({
        opacity: 1
      });
    };

    var hideOverlay = function() {
      setStyle({
        opacity: 0
      });
    };

    var setStyle = function( object ) {
      for(var style in object) {
        div.style[ style ] = object[ style ];
      }
    };

    // Matches our text container to the size of the player instance
    this.resize = function( width, height ) {
      setStyle({
        position: 'absolute',
        margin: '0',
        padding: '10px 15px 10px',
        background: 'rgba( 0, 0, 0, .7 )',
        color: 'white',
        fontSize: '12px',
        width: '100%'
      });
    };

    // Bind player events
    player.onReady( setupOverlay );
    player.onPlay( hideOverlay );
    player.onPause( showOverlay );
    player.onComplete( showOverlay );
  };

  jwplayer().registerPlugin( 'overlay', overlay );

})( jwplayer );

这提供了 JWPlayer 所需的完整 Javascript 堆栈。 JWPlayer 是免费的，带有水印。

【讨论】：