# Video
> A flexible modern video js plugin.
## Introduction

#### [Demo]()
---
### Installation

#### NPM
```javascript
npm i @pluginjs/video
```
#### Yarn
```javascript
yarn add @pluginjs/video
```

### Dependencies
- jQuery
- @pluginjs/core

---

## Getting Started
### Include
**Webpack && Rollup:**

ES2015+
```javascript
import video from "@pluginjs/video"
```

CommonJS
```javascript
require("@pluginjs/video")
```

**CDN:**
Development:
```html
<script src="/path/to/video.js"></script>
<link rel="stylesheet" href="/path/to/video.css">
```
Production:
```html
<script src="/path/to/video.min.js"></script>
<link rel="stylesheet" href="/path/to/video.min.css">
```

### Initialize
HTML:
```html
<body>
  <div class="element"></div>
</body>
```
JS:
```javascript
Pj.Video('.element', options);
// or jquery way
$('.element').plugin('Video', options);
```
---
## API

### Options:
Options are called on video instances through the video options itself.
You can also save the instances to variable for further use.

**Example**
```javascript
$('.element').plugin('Video', {
  template: "foo"
})
```
or use dataset
```html
<div class="element" data-template="foo"></div>
<script>
  $('.element').plugin('Video')
</script>
```

Name | Description | Default
-----|--------------|-----
`"template"` | Main structure template | `function() {...}`
`"templates"` | Template blocks | `{}`
`"url"` | Video url | ``
`"id"` | Video id | ``
`"type"` | Different video sources, such as HTML5 Youtube Vimeo | ``
`"autoplay"` | Whether to play automatically when loading video | `true`
`"loop"` | Whether to loop the video | `true`
`"controls"` | Whether to show the video controller | `false`
`"poster"` | Whether to display the poster | ``

### Events:
Events are called on video instances through the video events itself.
You can also save the instances to variable for further use.

Name | Description
-----|-----
`"ready"` | Gets fired when plugin is ready
`"destroy"` | Gets fired when plugin is destroy
`"load"` | Gets fired when video is loading
`"loaded"` | Gets fired when video is loaded
`"play"` | Gets fired when video is play
`"pause"` | Gets fired when video is pause
`"stop"` | Gets fired when video is stop
`"playend"` | Gets fired when video is playend
`"playerr"` | Gets fired when video is playerr

**example:**
```javascript
$video.plugin('Video', {
  onReady: function() {
    // code...
  }
})

$video.on(
  'video:ready',
  function(){
  // code...
  }
)
```
### Methods:
Methods are called on video instances through the video method itself.
You can also save the instances to variable for further use.

Name | Description
-----|-----
`"enable"` | Enabled plugin if plugin is disabled
`"disable"` | Disable plugin
`"destroy"` | Destroy plugin
`"pause"` | Pause  video
`"load"` | Load video
`"play"` | Play video
`"stop"` | Stop video
`"volume"` | Set the video volume

**example:**
```javascript
$video.plugin('Video', value)
$video.plugin('Video', value, "foo")
$video.plugin('Video', value, "foo", "bar")
```

### Classes:
Name | Description | Default
-----|------|------
`"NAMESPACE"` | Declare plugin namespace | `pj-video`
`"THEME"` | Declare plugin theme | `{namespace}--{theme}`
`"POSTER"` | Declare plugin poster | `{namespace}-poster`



---

## Browser support

Tested on all major browsers.

| <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_32x32.png" alt="Safari"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_32x32.png" alt="Chrome"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_32x32.png" alt="Firefox"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_32x32.png" alt="Edge"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/internet-explorer/internet-explorer_32x32.png" alt="IE"> | <img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_32x32.png" alt="Opera"> |
|:--:|:--:|:--:|:--:|:--:|:--:|
| Latest ✓ | Latest ✓ | Latest ✓ | Latest ✓ | >=10 ✓ | Latest ✓ |

As a jQuery plugin, you also need to see the [jQuery Browser Support](http://jquery.com/browser-support/).

## Contributing
See [Contribution.md](Contribution.md).

## Changelog
To see the list of recent changes, see [Releases section](https://github.com/amazingSurge/plugins/releases).

## Version
Version: 0.0.1

## Copyright and license
Copyright (C) 2017 Creation Studio Limited.

Licensed under [the GPL license](LICENSE).