V-pip 🖼



---

Demo


---

Features

- Vue 💚 Picture-in-picture!
- Built from scratch using TypeScript

---

$3

- For Vue 3.x version – npm i v-pip
- For Vue 2.x version – npm i v-pip@1

Table of Contents

- V-pip 🖼
- Demo
- Features
- Versions
- Table of Contents
- Demo
- Requirements
- Installation
- Build Setup
- Usage
- Globally
- As a component
- As a plugin
- Locally
- HTML
- JS
- HTML
- JS
- Props
- Events
- Contributing
- Author
- License

Demo


Requirements

- vue ^3.x

$3

``bash
npm install v-pip # yarn add v-pip
`

CDN: UNPKG | jsDelivr (available as window.VPip)

$3

`bash


install dependencies

$ npm ci

package the library

$ npm run build
`

Usage

$3

#### As a component

`javascript
import { VPip } from 'v-pip';
Vue.component('VPip', VPip);
`

#### As a plugin

`javascript
import Vue from 'vue';
import VPip from 'v-pip';

Vue.use(VPip);
`

$3

`javascript
import { VPip } from 'v-pip';
`

Example 1 (refer App.vue)

$3

`html
:video-options="videoOptions"
:button-options="buttonOptions"
@video-in-pip="handlePIP"
@requesting-pip-failure="handlePipOpenFailure"
@exiting-pip-failure="handlePipExitFailure"
/>
`

$3

`javascript
import { VPip } from 'v-pip';

Vue.component('example-component', {
components: {
VPip,
},
data: () => ({
isPip: false,
videoOptions: {
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
poster:
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
wrapper: '',
class: '',
height: '',
width: '',
},
buttonOptions: {
wrapper: '',
type: 'button',
class: '',
label: 'Toggle picture-in-picture',
},
}),
methods: {
handlePIP(e) {
this.isPip = e;
},
handlePipOpenFailure(err) {
console.log('Video failed to enter Picture-in-Picture mode.', err);
},
handlePipExitFailure(err) {
console.log('Video failed to leave Picture-in-Picture mode.', err);
},
},
});
`

Example 2 (minimal)

$3

`html

`

$3

`javascript
import { VPip } from 'v-pip';

Vue.component('example-component', {
components: {
VPip,
},
data: () => ({
videoOptions: {
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
},
}),
});
`

$3

| Name | Type | Required? | Description |
| ---------------- | ------ | --------- | --------------------------------------------------------- |
| video-options | Object | Yes | The set of options required to setup the V-Pip component. |
| button-options | Object | No | The set of options for the toggle button |

$3

| Name | Description |
| ------------------------ | ------------------------------------------------------------------------ |
| video-in-pip | Emits an Boolean whether the Video is in PIP or not |
| requesting-pip-failure | Emits an Object when the video fails to enter Picture-in-Picture mode. |
| exiting-pip-failure | Emits an Object when the video fails to leave Picture-in-Picture mode. |

Contributing

1. Fork it ( https://github.com/vinayakkulkarni/v-pip/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature`)
5. Create a new Pull Request

_Note_:

1. Please contribute using GitHub Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, _read more about it here_
3. PS. Ensure your commits are signed. _Read why_

Author

v-pip © Vinayak, Released under the MIT License.

Authored and maintained by Vinayak Kulkarni with help from contributors (list).

> vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @\_vinayak_k

License