# videojs-marquee-overlay

> marquee plugin on video

Latest version **2.0.1** (published 2017-10-24) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install videojs-marquee-overlay
pnpm add videojs-marquee-overlay
yarn add videojs-marquee-overlay
bun add videojs-marquee-overlay
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2017-10-24 |
| First published | 2017-10-12 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Emre Karatasoglu |
| Maintainers | lethea |
| Keywords | videojs, videojs-plugin |

## Links

- npm: https://www.npmjs.com/package/videojs-marquee-overlay
- Repository: https://github.com/Lethea/videojs-marquee-overlay-scrolling-text
- Homepage: https://github.com/Lethea/videojs-marquee-overlay-scrolling-text#readme
- Issues: https://github.com/Lethea/videojs-marquee-overlay-scrolling-text/issues
- npm.io page: https://npm.io/package/videojs-marquee-overlay

## Dependencies (7)

- [global](https://npm.io/package/global.md) ^4.3.2
- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [video.js](https://npm.io/package/video.js.md) ^5.19.2
- [jquery.marquee](https://npm.io/package/jquery.marquee.md) ^1.3.94
- [videojs-watermark](https://npm.io/package/videojs-watermark.md) ^2.0.0
- [videojs-contrib-hls](https://npm.io/package/videojs-contrib-hls.md) ^5.11.1
- [videojs-quality-picker](https://npm.io/package/videojs-quality-picker.md) 0.0.3

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.0.1 (latest) — 2017-10-24
- 2.0.0 — 2017-10-20
- 1.0.4 — 2017-10-12
- 1.0.1 — 2017-10-12

## README

# 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

<!-- START doctoc -->
<!-- END doctoc -->
## Installation

```sh
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][videojs], so that the `videojs` global is available.

```html
<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
```html
<!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)


[videojs]: http://videojs.com/

---
_Source: https://npm.io/package/videojs-marquee-overlay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._