v-pip

Vue.js wrapper for picture-in-picture

Usage no npm install needed!

<script type="module">
  import vPip from 'https://cdn.skypack.dev/v-pip';
</script>

README

V-Pip 🖼

GitHub Workflow Status GitHub Workflow Status GitHub release (latest SemVer) npm npm npm bundle size (version) npm type definitions DeepScan grade Snyk Vulnerabilities for GitHub Repo LGTM Alerts LGTM Grade GitHub contributors FOSSA

built using janak eslint prettier rollup vue typescript

Features

  • Vue 💚 Picture-in-picture!
  • Built using TypeScript

Versions

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

Table of Contents

Demo

Edit v-pip demo

Requirements

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: {
      wrapper: '',
      src: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      poster: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
    },
    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

FOSSA Status