Skip to content

Latest commit

 

History

History
255 lines (225 loc) · 11.3 KB

README.md

File metadata and controls

255 lines (225 loc) · 11.3 KB
Raw

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

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

Demo in jsfiddle

Plyr with fullscreen

Demo in jsfiddle

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:

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