- Notifications
You must be signed in to change notification settings - Fork6
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
License
NotificationsYou must be signed in to change notification settings
vinayakkulkarni/v-pip
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
- Vue 💚 Picture-in-picture!
- Built from scratch usingTypeScript
- For Vue 3.x version –
npm i v-pip - For Vue 2.x version –
npm i v-pip@1
- vue
^3.x
npm install v-pip# yarn add v-pipCDN:UNPKG |jsDelivr (available aswindow.VPip)
# install dependencies$ npm ci# package the library$ npm run build
import{VPip}from'v-pip';Vue.component('VPip',VPip);
importVuefrom'vue';importVPipfrom'v-pip';Vue.use(VPip);
import{VPip}from'v-pip';
Example 1 (refer App.vue)
<v-pip:video-options="videoOptions":button-options="buttonOptions"@video-in-pip="handlePIP"@requesting-pip-failure="handlePipOpenFailure"@exiting-pip-failure="handlePipExitFailure"/>
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)
<v-pip:video-options="videoOptions"/>
import{VPip}from'v-pip';Vue.component('example-component',{components:{ VPip,},data:()=>({videoOptions:{src:'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',},}),});
| 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 |
| Name | Description |
|---|---|
video-in-pip | Emits anBoolean whether the Video is in PIP or not |
requesting-pip-failure | Emits anObject when the video fails to enter Picture-in-Picture mode. |
exiting-pip-failure | Emits anObject when the video fails to leave Picture-in-Picture mode. |
- 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 newPull Request
Note:
- Please contribute usingGitHub Flow
- Commits & PRs will be allowed only if the commit messages & PR titles follow theconventional commit standard,read more about ithere
- PS. Ensure your commits are signed.Read why
v-pip ©Vinayak, Released under theMIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).
vinayakkulkarni.dev · GitHub@vinayakkulkarni · Twitter@_vinayak_k
About
🖼 Tiny vue wrapper for supporting native picture-in-picture mode.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
No packages published
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.