- 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
Stars
Watchers
Forks
Packages0
No packages published