# vplayer

> A video player plugin for desktops/mobiles/tablets

Latest version **1.2.0** (published 2016-03-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install vplayer
pnpm add vplayer
yarn add vplayer
bun add vplayer
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2016-03-02 |
| First published | 2015-09-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Daniel Jackson |
| Maintainers | daniel.jackson.bd |
| Keywords | video, player, video player, fullscreen, video modal, javascript, html video player, html5 video player |

## Links

- npm: https://www.npmjs.com/package/vplayer
- Repository: https://github.com/thisisbd/vPlayer
- Issues: https://github.com/thisisbd/vPlayer/issues
- npm.io page: https://npm.io/package/vplayer

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2016-03-02
- 1.0.3 — 2015-12-15
- 1.0.2 — 2015-12-15
- 1.0.0 — 2015-10-19
- 0.2.2 — 2015-10-19
- 0.2.1 — 2015-10-19
- 0.2.0 — 2015-10-19
- 0.1.15 — 2015-10-19
- 0.1.14 — 2015-10-19
- 0.1.11 — 2015-09-16
- 0.1.10 — 2015-09-16
- 0.1.9 — 2015-09-16
- 0.1.8 — 2015-09-15
- 0.1.7 — 2015-09-15
- 0.1.6 — 2015-09-15
- … 5 more at https://npm.io/package/vplayer/versions

## README

# vPlayer

[![npm](https://img.shields.io/npm/v/vplayer.svg)](https://www.npmjs.com/package/vplayer)

A library to provide an easy-to-implement but customizable video player on desktops with support for fullscreen on tablets/phones.

### Installation

The library comes as an npm package:

`npm install vplayer --save`

### Including the correct files

Include the script on your page (adjusting the link path as necessary)
  
`<script src="node_modules/vplayer/vplayer.js"></script>`

Include the vplayer stylesheet (again, exact path may vary)
  
`<link rel="stylesheet" href="node_modules/vplayer/style.css">`

### Ways of using vPlayer

#### One video on a page

Include the following html on your page

```
<a class="vplayer-popup" href="#">
  Launch video player!
</a>

<div id="vplayer-overlay">&nbsp;</div>

<div id="vplayer-modal">
  <a id="vplayer-close-btn" href="#"></a>
  <video id="vplayer-video"></video>
  <div id="vplayer-video-description">&nbsp;</div>
</div>

<video controls id="vplayer-video-mobile">
  <source src="folder_to_video/video_path.mp4">
</video>
```

If you want to have multiple vplayer activation links on a page, you just need to add another anchor tag with the class `vplayer-popup`
  
```
<a class="vplayer-popup">
  Open the video
</a>
```

You then need to initialize vplayer on page load using the following
  
`VPlayer.setup()` 
or 
`VPlayer.setup(false)`

The parameter to the setup method is whether there are multiple videos

#### Multiple videos on a page

```
<a class="vplayer-popup" data-video-link="video-1.mp4" href="#">
  Launch video player!
</a>

<div id="vplayer-overlay">&nbsp;</div>

<div id="vplayer-modal">
  <a id="vplayer-close-btn" href="#"></a>
  <video id="vplayer-video"></video>
</div>

<video controls id="vplayer-video-mobile">
</video>

<a class="vplayer-popup" data-video-link="video-2.mp4" href="#">
  Launch video 2
</a>
```

In your <a> tags put the link of the video which that link should open in the `data-video-link` attribute
`<a class="vplayer-popup" data-video-link="link-to-video.mp4" href="#">Play video</a>`

You then need to initialize vplayer on page load using the following

`VPlayer.setup(true)`

#### Video Desctiptions Below Video

```
<a class="vplayer-popup" data-video-link="video-1.mp4" data-video-description="A small description to appear below the video" href="#">
  Launch video player!
</a>

<div id="vplayer-overlay">&nbsp;</div>

<div id="vplayer-modal">
  <a id="vplayer-close-btn" href="#"></a>
  <video id="vplayer-video"></video>
</div>

<video controls id="vplayer-video-mobile">
</video>

<a class="vplayer-popup" data-video-link="video-2.mp4" data-video-description="A second small description" href="#">
  Launch video 2
</a>
```

By adding the `data-video-description` attribute to your vPlayer a tags will include a small description below the video. These tags are optional and can be used on some, all or none of your videos.

### Customizability

There are some methods which can customize VPlayer

```
// how long for the modal to take to increase
.setTransitionTime(time_in_milliseconds)

// the initial width and height of the modal
.setInitialSize(initial_width, initial_height) // (px, px)

// how much side padding so that the VPlayer doesn't sit right on the edge of the screen
.setPadding(horizontal_padding, vertical_padding) // (px, px)

// Methods can also be chained like so
VPlayer.setup().setTransitionTime(800).setInitialSize(200, 150).setPadding(30, 40);
```

  
# Contributing

  See [issues](https://github.com/thisisbd/vPlayer/issues), general feature improvements also welcome!
  
# License

  MIT

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