Add Customizable Layer To HTML5 Videos - jqVideoLayer

Add Customizable Layer To HTML5 Videos - jqVideoLayer

The jQuery Video Layer plugin adds dynamic, customizable layers to your HTML5 video player as you seen in the Youtube videos. The in-video overlay layers automatically show and hide depending on the video time. Supports any content such as ads, text, images, etc.

1. The plugin requires jQuery and jQuery UI libraries loaded in the document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.structure.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

2. Load the jQuery Video Layer plugin's files in the document.

<link rel="stylesheet" href="dist/video-layers.structure.css">
<link rel="stylesheet" href="dist/video-layers.theme-default.css">
<script src="dist/jquery.video-layers.js"></script>

3. Embed a standard HTML5 video in the document.

<video controls>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

4. Create your own layers overlaid in the video while playing.

<div id="external-layer" class="layer">
  Layer in container
</div>
 <div id="layer-img" class="layer">
  <img src="bg.jpg">
</div>
..

5. Call the function to enable the video layers.

$("video").videoLayers({
  layers:[
    {
      element:"#external-layer",
      appendToLayers:false, //by default the layers are appended to the layer container
      start:1,
      stop:4,
      show:{effect:"fade",duration:1000},
      hide:{effect:"fade",duration:1000}
    },
    {
      element:"#layer-img",
      cssClass:"addThisClass and This One c-video-layers__layer--strip",
      styles:{
          width:"50%"
      },
      position:{
          my:"center",
          to:"center"
      },
      start:5,
      stop:10,
      show:{effect:"fade",duration:1000},
      hide:{effect:"blind",duration:500}
    }
  ]
})

6. You can also create the overlays directly in the JavaScript during init.

$("video").videoLayers({
  layers:[
    {
      content:"Some text for the layer",
      position:[25,25],
      start:1,
      stop:4
    },
  ]
})

7. All default configuration options.

$("video").videoLayers({
  namespace: "jq-videolayers",
  classes: {
      root: "c-video-layers",
      video: "c-video-layers__video",
      layer: "c-video-layers__layer",
      visible: "c-video-layers__visible",
      layersContainer: "c-video-layers__container"
  },
  layers: []
})

8. Available event handlers.

$("video").videoLayers()
.on(jqVideoLayers.VideoLayersEvents.beforeShowLayer,(e,data)=>{
  // before show
}).on(jqVideoLayers.VideoLayersEvents.showLayer,(e,data)=> {
  // when the layer is shown
}).on(jqVideoLayers.VideoLayersEvents.beforeHideLayer,(e,data)=>{
  // before hide
}).on(jqVideoLayers.VideoLayersEvents.hideLayer,(e,data)=> {
  // when the layer is hidden
})

This awesome jQuery plugin is developed by davinchi-finsi. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 01.03.2018
  • Source