V-pip NPM | npm.io

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

V-pip 🖼

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

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

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