❤
npm
Sign UpSign In

videojs-dynamic-overlay-updated

1.0.9 • Public • Published

videojs-newoverlay

Dynamic Overlay on Video

Added Features (new)

If overlay is manually remove from video dom by inspecting the browser, new function is added which will check if overlay exist or not if not , it will again inject the overlay dom in video

Table of Contents

Installation

If you want to use new added features then install from this:

npm i videojs-dynamic-overlay-updated

if not use original package.

npm install --save videojs-dynamic-overlay

Usage

Sample Image : https://prnt.sc/gwejew To include videojs-newoverlay on your website or web application, use any of the following methods.

<script> Tag

This is the simplest case. Get the script in whatever way you prefer and include the plugin after you include video.js, so that the videojs global is available.

<script src="//path/to/video.min.js"></script>
<script src="//path/to/videojs-newoverlay.min.js"></script>
<script>
  var player = videojs('my-video');
 
  player.newoverlay();
  ################ OR ###############
  player.newoverlay({
          contentOfOverlay:"Sample Content",
          changeDuration:1000
        });
</script> 
<style>
.vjs-emre{
    z-index:9999;
    color:black;
    background-color:brown;
    font-size:20px;
    position:absolute;
    right:20px;
  }
</style> 

No Need To Build

Working example with built scripts .

Quaility Selector Dynamic Overlay that configurable

http://cdn.emrekaratasoglu.com/overlay_demo/

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>videojs-newoverlay Demo</title>
  <link href="video-js.css" rel="stylesheet">
 
</head>
<body>
  <video id="videojs-newoverlay-player" class="video-js vjs-default-skin" controls height="480" width="848" poster="http://vjs.zencdn.net/v/oceans.png">
    <source src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" type="application/x-mpegurl">
  </video>
  <script src="es5-shim.js"></script> 
  <script src="video.js"></script> 
  <script src="videojs-newoverlay.js"></script> 
  <script src="videojs-contrib-hls.js"></script> 
  <script src="videojs5-hlsjs-source-handler.js"></script> 
  <script>
    (function(window, videojs) {
      var player = window.player = videojs('videojs-newoverlay-player');
      player.newoverlay({
        contentOfOverlay:"Emre Karataşoğlu ID NUMBER",
        changeDuration:10000
      });
      player.qualityPickerPlugin();
    }(window, window.videojs));
  </script> 
</body>
</html>
<style>
  .vjs-emre{
    z-index:9999;
    color:black;
    background-color:brown;
    font-size:20px;
    position:absolute;
    width: 170px; word-break: break-all; word-wrap: break-word;
    right:20px;
 
 
  }
 
</style> 

License

Apache-2.0. Copyright (c) Emre Karatasoglu <emre.karatasoglu@hotmail.com> Update Contribuitor : kaiser

Readme

Keywords

Package Sidebar

Install

npm i videojs-dynamic-overlay-updated

Repository

github.com/kaissaroj/videojs-dynamic-overlay

Homepage

github.com/kaissaroj/videojs-dynamic-overlay#readme

Weekly Downloads

1

Version

1.0.9

License

Apache-2.0

Unpacked Size

26.6 kB

Total Files

17

Last publish

Collaborators

  • kaizer433
Try on RunKit
Report malware