Miss any of our Open RFC calls?Watch the recordings here! »

videojs-marquee-overlay

2.0.1 • Public • Published

videojs-marquee-overlay

marquee plugin on video

Sample image : http://prntscr.com/gwflh5

This will provide scrolling text on video both normal screen & full screen. Hls.js included Jquery included

Table of Contents

Installation

You can add to your project with
npm install --save videojs-marquee-overlay
Or
you can download
https://github.com/Lethea/videojs-marquee-overlay-scrolling-text or clone
git clone git@github.com:Lethea/videojs-marquee-overlay-scrolling-text.git then
npm install

Usage

To include videojs-marquee-overlay on your website or web application, use any of the following methods.

videojs-marquee-overlay has 2 more examples with hls quaility selector + watermark addon.

Both of examples works. You can check in examples directory

<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="node_modules/video.js/dist/video.js"></script>
<script src="dist/videojs-marquee-overlay.js"></script>
<script src="node_modules/videojs-contrib-hls/dist/videojs-contrib-hls.js"></script>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/jquery.marquee/jquery.marquee.js"></script>
<script>
  var player = videojs('my-video');
 
  player.marqueeOverlay({
      contentOfMarquee: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      position: "bottom",
      direction: "left",
      duration: 15000,
      backgroundcolor: "red",
      color: "#fefefe"
    });
</script> 

No Need to build

Working Example Included Built Scripts in Working_sample Directory With Quailty Selector Scroll Text ( Marquee Plugin ) Watermark Playback Speed

http://cdn.emrekaratasoglu.com/marquee_demo/

Samples

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>videojs-marquee-overlay Demo</title>
  <link href="video-js.css" rel="stylesheet">
  <link href="videojs.watermark.css" rel="stylesheet">
 
</head>
<body>
<video id="videojs-marquee-overlay-player" class="video-js vjs-default-skin" controls width="848" height="480"  data-setup='{"playbackRates": [1, 1.5, 2] }'>
  <source src="http://sample.vodobox.net/skate_phantom_flex_4k/skate_phantom_flex_4k.m3u8" type="application/x-mpegurl">
</video>
 
<script src="video.js"></script>
<script src="videojs-marquee-overlay.js"></script>
<script src="videojs-contrib-hls.js"></script>
<script src="jquery.js"></script>
<script src="videojs5-hlsjs-source-handler.js"></script>
<script src="jquery.marquee.js"></script>
<script src="videojs.watermark.js"></script>
<script>
  (function (window, videojs) {
    var player = window.player = videojs('videojs-marquee-overlay-player');
    player.marqueeOverlay({
      contentOfMarquee: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      position: "bottom",
      direction: "left",
      duration: 15000,
      backgroundcolor: "red",
      color: "#fefefe"
    });
    player.qualityPickerPlugin();
    player.watermark({
      file: 'Owned_Stamp.png',
      xpos: 100,
      ypos: 0,
      clickable:true,
      url:"http://emrekaratasoglu.com",
      xrepeat: 0,
      opacity: 0.5
    });
  }(window, window.videojs));
 
</script> 
<style>
  .vjs-emre-marquee {
    width: 100%;
    overflow: hidden;
    border: 1px solid #ccc;
    z-index:9998;
    position:absolute;
    font-size: 20px;
  }
  .vjs-control{
    z-index:9999;
  }
</style> 
 
</body>
</html>

License

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

Install

npm i videojs-marquee-overlay

DownloadsWeekly Downloads

2

Version

2.0.1

License

Apache-2.0

Last publish

Collaborators

  • avatar