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: 26 days 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 (almost 2 years ago)
• Default Branch: master
• Last Pushed: 2022-06-18T12:20:33.000Z (almost 2 years ago)
• Last Synced: 2024-03-28T00:20:50.050Z (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

Lists

• awesome-vue - v-on-page-video - Vue.js directive to change the state of a Video element on visibility change (Components & Libraries / UI Utilities)

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/)