vinayakkulkarni
V-pip 🖼
Demo
Features
- Vue 💚 Picture-in-picture!
- Built from scratch using TypeScript
Versions
- For Vue 3.x version –
npm i v-pip - For Vue 2.x version –
npm i v-pip@1
Table of Contents
Demo
Requirements
- vue
^3.x
Installation
npm install v-pip # yarn add v-pipCDN: UNPKG | jsDelivr (available as window.VPip)
Build Setup
# install dependencies
$ npm ci
# package the library
$ npm run buildUsage
Globally
As a component
import { VPip } from 'v-pip';
Vue.component('VPip', VPip);As a plugin
import Vue from 'vue';
import VPip from 'v-pip';
Vue.use(VPip);Locally
import { VPip } from 'v-pip';
<summary>
Example 1 (refer App.vue)
</summary>
HTML
<v-pip
:video-options="videoOptions"
:button-options="buttonOptions"
@video-in-pip="handlePIP"
@requesting-pip-failure="handlePipOpenFailure"
@exiting-pip-failure="handlePipExitFailure"
/>JS
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);
},
},
});
<summary>
Example 2 (minimal)
</summary>
HTML
<v-pip :video-options="videoOptions" />JS
import { VPip } from 'v-pip';
Vue.component('example-component', {
components: {
VPip,
},
data: () => ({
videoOptions: {
src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
},
}),
});Props
| 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 |
Events
| 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
- Fork it ( https://github.com/vinayakkulkarni/v-pip/fork )
- Create your feature branch (
git checkout -b feat/new-feature) - Commit your changes (
git commit -Sam 'feat: add feature') - Push to the branch (
git push origin feat/new-feature) - Create a new Pull Request
Note:
- Please contribute using GitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
- 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
