Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahdikhashan/v-on-page-video
A Vue.js page visibility directive
https://github.com/mahdikhashan/v-on-page-video
directive visibilitychange vue2 vuejs
Last synced: about 1 month ago
JSON representation
A Vue.js page visibility directive
- Host: GitHub
- URL: https://github.com/mahdikhashan/v-on-page-video
- Owner: mahdikhashan
- Created: 2022-06-18T00:16:55.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-06-18T12:20:33.000Z (over 2 years ago)
- Last Synced: 2024-11-07T08:18:57.914Z (about 2 months ago)
- Topics: directive, visibilitychange, vue2, vuejs
- Language: JavaScript
- Homepage: https://codesandbox.io/s/vue-onpagevideo-custom-directive-85p0oo
- Size: 186 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# v-on-page-video
![npm (tag)](https://img.shields.io/npm/v/@mahdikhashan/v-on-page-video/latest?style=plastic)
![npm bundle size](https://img.shields.io/bundlephobia/minzip/@mahdikhashan/v-on-page-video)
![npm](https://img.shields.io/npm/dy/@mahdikhashan/v-on-page-video)
![npm peer dependency version](https://img.shields.io/npm/dependency-version/@mahdikhashan/v-on-page-video/peer/vue)
![GitHub commit activity](https://img.shields.io/github/commit-activity/y/mahdikhashan/v-on-page-video)
![NPM](https://img.shields.io/npm/l/@mahdikhashan/v-on-page-video)## Directive for Vue 2 to pause and play the video element when page visibility changes like moving the tab to background
---
## Demo
[Demo](https://codesandbox.io/s/vue-onpagevideo-custom-directive-85p0oo)
## Installation
```
npm install --save @mahdikhashan/v-on-page-video
```## How to use
add the custom directive to you component```
import onPageVideo from "@mahdikhashan/v-on-page-video";
export default {
name: "HelloWorld",
directives: {
onPageVideo,
},
};```
## Contributing
If you want to contribute to this project simply fork it and clone it then run
`npm i`
in the root of the project, then run
`npm run start`
to run development server.### Licence and cast
MIT Licence
by [Mahdi Khashan](https://www.linkedin.com/in/mahdi-khashan-ir/)