# vue-full-player-video

> It's a simple player of video with vue, base controls and playlist

Latest version **1.0.1** (published 2021-07-15) · 0 weekly downloads

## Install

```sh
npm install vue-full-player-video
pnpm add vue-full-player-video
yarn add vue-full-player-video
bun add vue-full-player-video
```

## 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.0.1 |
| Published | 2021-07-15 |
| First published | 2021-07-15 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 467.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | David William Balbino |
| Maintainers | davidbalbino |
| Keywords | vue, vuejs, player, vue-player, vue-full-player-video, video, video player, full player, easy player |

## Links

- npm: https://www.npmjs.com/package/vue-full-player-video
- Repository: https://github.com/push-in/vue-full-player-video
- Homepage: https://push-in.github.io/vue-full-player-video/
- Issues: https://github.com/push-in/vue-full-player-video/issues
- npm.io page: https://npm.io/package/vue-full-player-video

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5

## 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.1 (latest) — 2021-07-15

## README

# vue-full-player-video

It's a simple player of video with vue, base controls and playlist

# install

npm i --save vue-full-player-video



### Example to use
```
<template>
  <div id="app">
    <FullPlayer
      :src="src"
      width="80%"
      @onPlayPause="onPlayPause"
      @muted="muted"
      @onChangeVolume="onChangeVolume"
      @onEnded="onEnded"
    />

    <div>
      <button @click="setPlay">Test Video</button>
      <button @click="setArray">Test Video Playlist</button>
    </div>

    
  </div>
</template>

<script>
import FullPlayer from 'vue-full-player-video'
export default {
  name: 'App',
  components: {
    FullPlayer
  },
  data: () => {
    return {
      src: null
    }
  },
  methods: {
    setArray () {
      this.src = [
        {
          title: 'GOKU SOLA',
          src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
          poster: "https://coolthemestores.com/wp-content/uploads/2020/11/naruto-features.jpg"
        },

        {
          title: 'TEST',
          src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
          poster: 'https://i.pinimg.com/originals/db/f4/af/dbf4af88edfe3d1b13c517aa0a933305.jpg'
        }
      ]
    },
    setPlay () {
      this.src = {
        src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
        title: 'GOKU SOLA',
        poster: 'https://coolthemestores.com/wp-content/uploads/2020/11/naruto-features.jpg'
      }
    },

    onPlayPause (event) {
      console.log(event)
    },

    muted (event) {
      console.log(event)
    },

    onChangeVolume (event) {
      console.log(event)
    },

    onEnded (event) {
      console.log(event)
    }
  }
}
</script>


```



## Props

| Name | Type | Default | Example
| --- | --- | --- | --- |
| src | array or object |  |
| width | string | null | "50%" or "300px"


## Events

| Name | Return |
| --- | --- |
| onPlayPause | "played" or "paused" |
| muted | true or false |
| onChangeVolume | number of volume. min 0 and max 10 |
| onEnded | true |


## Future resources

Auto next video

Do you have any more ideas? open a PR :)

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