Overlay content layer on top of Video Player

Question

I would like to overlay a layer on top of a video player which is streaming some video context. Is this possible?

So the layer would be on top of the video player, ideally it would also be able to have a transparency too.

Also, when the video player is 'fullscreened' ie. the user hits of full screen icon on the player the layer would also move / expand to the same proportions.

I wonder if this is possible using jquery?

Could someone kind please give me a steer on this? Is it possible? Does anyone have any examples?

thanks a million! Ryan

Answer 1

Maybe this GitHub ressource can help. This provides the full Javascript stack needed to this exactly this with JWPlayer. JWPlayer is free with watermark.

You could use JWPlayer (It's opensource too)

content of your main.js file============== // Pass the plugin reference and configuration parameter ('text') to the embed script

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'
    }
  }
});

End ==============================

====Content of overlay.js file=============

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

This provides the full Javascript stack needed to this exactly this with JWPlayer. JWPlayer is free with watermark.

Answer 2

Seems like there are two different parts to this question.

1. Show a transparent div over a video player
2. Expanding the div to cover the player in fullscreen view

It's all possible, but only under certain conditions and with a fair bit of work. Most importantly, you need to have control over the way the video player's embedded in the page, and the video player needs to have a Javascript API that will trigger the resizing of the div.

If the video player is a Flash SWF, 1 is only possible if the SWF's embedded with a parameter "wmode" set to "opaque" (or "transparent"). Basically the wmode setting tells the Flash to act like a normal HTML element and not show through anything positioned on top of it. (More on this here.) On top of that, the video player must have a CSS "z-index" property lower than the z-index of your div. (The z-index is the stacking order, where 0 is the bottom and 1 is the layer above.)

As long as your video player container had position:relative, you could give your div position:absolute in CSS and position it relative to the video player with top and left properties.

Making the div transparent is also certainly doable. But it can get a bit complicated if you want it to be semi-transparent with content inside it that is opaque. Here's something on the CSS for transparency and details on the jiggery-pokery you need to do to make content show inside a translucent div.

There's an example here where elements have been layered on top of a JW Media Player, which will give you some idea how that part of it's done.

2 will require some Javascript, and it can be done with JQuery or Mootools, or just plain Javascript. Crucially, the video player needs to tell the rest of the page when it's resized to full screen: when that happens your Javascript can resize the div appropriately. Here's some code for another good video player, FlowPlayer, which shows how to listen for the "onFullScreen" event.

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

Inside the onFullScreen function you'd put your code which resizes the div. You'd also need to use another listener to size it back down again when the player's shrunk back.