Videojs-dynamic-overlay NPM

videojs-newoverlay

Dynamic Overlay on Video For Education System Video Üzerine Text Vb Dinamik Yer Değiştirme

Installation

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>