vinayakkulkarni / v-pip

🖼 Tiny vue wrapper for supporting native picture-in-picture mode.

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

• 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

Installation

npm install v-pip # yarn add v-pip

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

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Usage

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';

Example 1 (refer App.vue)

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);
    },
  },
});

Example 2 (minimal)

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

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