Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including videojs-dynamic-overlay-updated with all npm packages installed. Try it out:

var videojsDynamicOverlayUpdated = require("videojs-dynamic-overlay-updated")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

videojs-dynamic-overlay-updated v1.0.9

User info on video (video security from piracy)

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free