videojs-dynamic-overlay-updated
v1.0.9
Published
User info on video (video security from piracy)
Downloads
14
Readme
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-updatedif not use original package.
npm install --save videojs-dynamic-overlayUsage
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 <[email protected]> Update Contribuitor : kaiser