jq-video-layers
jqVideoLayers is a JQuery widget that allows to add layers like Youtube to any html5 video.
Is extensible using jQuery UI widget
Dependencies
- jquery
- jQuery UI:
- jQuery UI widget
- jQuery UI position[optional]
- jQuery UI effects[optional]
Features
- Typescript sources
- All the css classes are configurable. See css classes
- Show/Hide layers depending on the video time
- Extensible with Widget. See jQuery UI widget docs
- Layers could be over the video or in external containers
- Compatible with any html5 native video
- Compatible with Javascript video players
- Possibility to set positions with jQuery UI Position
- Possibility to use jQuery UI Show/Hide effects
Note jqVideoLayers doesn't provide (for now) the posibility to set overlays when the video is in full screen BUT, if is used with a Javascript video player like plyr is possible. Please see the example
Docs
For more info, please check the docs
Playground
Plyr with fullscreen
Usage
Install with npm i jq-video-layers or download the latest release
Import as module
Typescript:
import * as $ from "jquery"; //choose one of the follow options //for jquery-ui package import "jq-video-layers/esm2015/jquery-ui-deps"; //for jquery-ui-dist package import "jquery-ui-dist/jquery-ui"; import {VideoLayers} from "jq-video-layers"; $("someSelector").videoLayers(<VideoLayersOptions>{ //options });Vanilla ES2015
import * as $ from "jquery"; //choose one of the follow options //for jquery-ui package import "jq-video-layers/esm2015/jquery-ui-deps"; //for jquery-ui-dist package import "jquery-ui-dist/jquery-ui"; import "jq-video-layers"; $("someSelector").videoLayers({ //options });Please note that depending of the bundler you are using other configurations may be necessary. For example, shimming JQuery and jQuery UI.
Traditional way
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Some Title</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script type="text/javascript" src="path/to/jquery.video-layers"></script> </head> <body> <video width="400" controls> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> <div id="layer-img" class="layer"> <img src="./image.jpg"> </div> <script type="text/javascript"> //jq-snap-puzzle will wait until de image is loaded $("video").videoLayers({ layers:[ { //The layer could be simple text, the text will be wrapped in a div element content:"Some text for the layer", position:[25,25], start:1, stop:4 }, { //Or could be a valid jQuery selector, jQuery object or Element instance element:"#layer-img", //Use c-video-layers__layer--strip to avoid the default styles of the layer cssClass:"addThisClass andThisOne c-video-layers__layer--strip", styles:{ width:"50%" }, position:{ my:"center", to:"center" //of is by default the container of the video }, start:5, stop:10, show:{effect:"fade",duration:1000}, hide:{effect:"blind",duration:500} } ] }); </script> </body> </html>Layers
The layers accepts two configurations:
- content: Will be used as raw content performing and append to the layers container
- element: Could be a jQuery valid selector, jQuery object or Element instance.
By default, the layers will be appended to the layersContainerEl, to avoid this behavior specify appendToLayers
$("video").videoLayers({ layers:[ { //The layer could be simple text, the text will be wrapped in a div element element:"#someQuery", position:[25,25], start:1, //Don't append the layer to the layers container appendToLayers:false } ] });This is useful to handle layers outside the video.
jQuery UI
jQuery UI could be included in the projects in many different ways and with different packages, instead of force you to use one, we leave up to you how to include it:
Modularized
Using npm i jquery-ui that install the package allowing to import the widgets you want.
We provided a file with the imports of the required dependencies:
import "jq-video-layers/esm2015/jquery-ui-deps";dist package
In npm is available the package jquery-ui-dist. Recommended if you will use the most of the framework.
Downloading a custom bundle
Go to the jQuery UI download page and checks:
- Core:
- Widget
- Position [optional]: check it if you are going to use the in the position option the jQuery UI Position
- Effects
- Check the effects you want to use
or use this configuration
Options
Please go to docs
Events
| Event name | Detail | Emit |
|---|---|---|
| videoLayers:beforeShowLayer | Triggered before show a layer | VideoLayerEvent |
| videoLayers:showLayer | Triggered when a layer has been shown | VideoLayerEvent |
| videoLayers:beforeHideLayer | Triggered before hide a layer | VideoLayerEvent |
| videoLayers:hideLayer | Triggered when a layer has been hidden | VideoLayerEvent |
For more info, please go to docs
Usage with other video players
By default jqVideoLayers wraps the video in a container and uses that container as reference for the layer position.
To use with other video players you must set the option useParentAsContainer to specify which element of the video player must be used as container.
For example, plyr generates this structure:
<div tabindex="0" class="plyr plyr--video plyr--fullscreen-enabled plyr--stopped plyr--ready"> <div class="plyr__video-wrapper" style="cursor: pointer;"> <div class="plyr__captions"></div> <video width="400" class="plyr--setup"> <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"> <source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video. </video> </div> <button type="button" data-plyr="play" class="plyr__play-large" aria-label="Play"> <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#plyr-play"></use> </svg> <span class="plyr__sr-only">Play</span> </button> <div class="plyr__controls"> </div> </div>The video wrapper to use for the layers could be plyr__video-wrapper, so in the jqVideoLayers options:
$("video").videoLayers({ //set the plyr container as wrapper container useParentAsContainer:".plyr__video-wrapper", layers: [ //layers ] });With useParentAsContainer jqVideoLayers will use the container specified as the root element, the layersContainerEl will be appended to the specified container
Please note that useParentAsContainer performs a JQuery parents search and the query must match with an element parent of the video
jQuery UI position
jQuery UI provides a util to handle positioning. By default, jqVideoLayers doesn't require jQuery UI position, could be used by css styles or using an array in the position option
$("video").videoLayers({ layers: [ { start:0 position:[25,100]//left-top } ] });To use jQuery UI position, include the module and use it normally
$("video").videoLayers({ layers: [ { start:0 position:{ my:"left top", at:"center" } } ] });By default, the "of" option of jQuery UI position is the wrapperEl of the widget
