Question

我想在视频播放器的顶部叠加一个层，该视频播放器正在播放一些视频上下文。这可能吗？

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

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

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

有人可以请我指点一下吗？可能吗？有没有人有任何例子？

感谢百万！莱恩

Answer 1

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

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

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

如果视频播放器是Flash SWF，则仅当嵌入了参数“wmode”的SWF设置为“opaque”（或“透明”）时才可以使用1。基本上，wmode设置告诉Flash像普通的HTML元素一样运行，而不是通过位于其上的任何东西显示。（更多关于此here。）最重要的是，视频播放器的CSS“z-index”属性必须低于div的z-index。（z-index是堆叠顺序，其中0是底部，1是上面的层。）

只要您的视频播放器容器具有position：relative，就可以给出div位置：CSS中的绝对位置，并将其相对于具有顶部和左侧属性的视频播放器定位。

使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的大小。当玩家缩小时，你还需要使用另一个监听器来重新调整它的大小。

Answer 2

也许这个GitHub资源可以提供帮助。这提供了与JWPlayer完全相同的完整Javascript堆栈。 JWPlayer免费提供水印。

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

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

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免费提供水印。

覆盖视频播放器顶部的内容层

2 个答案: