❤
npm
Sign UpSign In

videojs-dynamic-overlay

2.0.0 • Public • Published

videojs-newoverlay

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

Table of Contents

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> 

License

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

Readme

Keywords

Package Sidebar

Install

npm i videojs-dynamic-overlay

Repository

github.com/Lethea/videojs-dynamic-overlay

Homepage

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

Weekly Downloads

60

Version

2.0.0

License

Apache-2.0

Last publish

Collaborators

  • lethea
Try on RunKit
Report malware