# vue-mediaelement

> video live player

Latest version **1.0.0** (published 2019-04-26) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-mediaelement
pnpm add vue-mediaelement
yarn add vue-mediaelement
bun add vue-mediaelement
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2019-04-26 |
| First published | 2019-04-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 186.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | HQC |
| Maintainers | a526672351 |
| Keywords | hls, video, m3u8 |

## Links

- npm: https://www.npmjs.com/package/vue-mediaelement
- Repository: https://github.com/a526672351/vue-mediaelement
- Homepage: https://github.com/a526672351/vue-mediaelement#readme
- Issues: https://github.com/a526672351/vue-mediaelement/issues
- npm.io page: https://npm.io/package/vue-mediaelement

## Dependencies (5)

- [flv.js](https://npm.io/package/flv.js.md) ^1.5.0
- [hls.js](https://npm.io/package/hls.js.md) ^0.12.4
- [wind-dom](https://npm.io/package/wind-dom.md) 0.0.3
- [mediaelement](https://npm.io/package/mediaelement.md) ^4.2.9
- [mediaelement-plugins](https://npm.io/package/mediaelement-plugins.md) ^2.5.0

## 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

- 1.0.0 (latest) — 2019-04-26

## README

# vue-mediaelement
video live player

## Install

```bash
$ npm install vue-mediaelement
```

## Import

### Import using module

Import components to your project:

``` js
require('vue-mediaelement/dist/vue-mediaelement.css');

// in ES6 modules
import { Mediaelement } from 'vue-mediaelement';

// in CommonJS
const { Mediaelement } = require('vue-mediaelement');

// in Global variable
const { Mediaelement } = VueMediaelement;
```

And register components:

``` js
Vue.component('mediaelement', Mediaelement);
```

### Import using script tag

``` html
<link rel="stylesheet" href="../node-modules/vue-mediaelement/dist/vue-mediaelement.css" charset="utf-8">
<script src="../node-modules/vue-mediaelement/dist/vue-mediaelement.js"></script>
```

``` js
const vueMediaelement = VueMediaelement.Mediaelement;

new Vue({
  el: 'body',
  components: {
    'mediaelement': vueMediaelement
  }
});
```

## Usage

Work on a Vue instance:

```HTML
<mediaelement class="my-play"></mediaelement>
```

```CSS
.my-play {
  height: 200px;
  text-align: center;
}
```

## Options

### Props

| Option | Type | Description | Default |
| ----- | ----- | ----- | ----- |
| source | String | Specifies the URL of the video file; this value can also be indicated with source tags (refer to the Multiple Codecs section for more information) | '' |
| width | String | Sets the width of the video player in pixels; you can also indicate percentages | 480 |
| height | String | Sets the height of the video player in pixels; you can also indicate percentages | 270 |
| preload | String | Specifies if and how the author thinks the video should be loaded when the page loads; possible values: `auto`, `metadata` or `none` (recommended) | none |
| autoplay | Boolean | Specifies that the video will start playing as soon as it is ready | false |
| forceLive | Boolean | If set to true, the Live Broadcast message will be displayed and progress bar will be hidden, no matter if duration is a valid number | true |

### Events

| Event Name | Type | Description |
| ----- | ----- | ----- |
| success | callback | Action(s) that will be executed as soon as the source is loaded; passes 2 arguments: media (the wrapper that mimics all the native events/properties/methods for all renderers) and node (the original HTML video, audio or iframe tag where the media was loaded originally; if html5 is being used, media and node are the basically the same) |
| error | callback | Action(s) that will be executed if source doesn't load for any reason. Passes same arguments as success |


## FAQ

### How to programminly mediaelement to an item?

Use ref and call `remove()` method.

``` js
this.$refs.mediaelement.remove(newIndex)
```

For more details, please refer to example code.

## Development

Watching with hot-reload:

```bash
$ npm run dev
```

Develop on real remote device:

```bash
$ npm run remote-dev {{ YOUR IP ADDRESS }}
```

## License

MIT

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