{"_id":"plyr-vue","_rev":"59-8a694d311a4f6c5446f55d4bb9f2e774","name":"plyr-vue","dist-tags":{"latest":"2.6.8"},"versions":{"0.0.0":{"name":"plyr-vue","version":"0.0.0","type":"module","scripts":{"dev":"vite","build":"vue-tsc && vite build","preview":"vite preview"},"dependencies":{"plyr":"^3.7.8","vue":"^3.3.4"},"devDependencies":{"@vitejs/plugin-vue":"^4.2.3","typescript":"^5.0.2","vite":"^4.4.5","vue-tsc":"^1.8.5"},"_id":"plyr-vue@0.0.0","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\r\n\r\n```\r\n\r\n## Getting Started\r\n\r\nTo begin using Plyr Vue, follow these steps:\r\n\r\n### Importing\r\n\r\nFirst, import the necessary components and types from the Plyr Vue library:\r\n\r\n```js\r\nimport { usePlyrVue, PlyrVue } from \"plyr-vue\";\r\nimport type { PlyrVueOptions, PlyrVueInstance } from \"plyr-vue\";\r\nimport \"plyr-vue/dist/plyr-vue.css\";\r\n```\r\n\r\n### Initialization\r\n\r\nUse the usePlyrVue hook to initialize a Plyr player instance. This hook returns a registration function and a reference to the Plyr player instance:\r\n\r\n```ts\r\nconst [registerFunction, playerInstance] = usePlyrVue(options: PlyrVueOptions);\r\n```\r\n\r\n### Integration\r\n\r\nIntegrate the Plyr Vue component into your Vue template:\r\n\r\n```html\r\n\r\n \r\n \r\n \r\n\r\n```\r\n\r\nYou can see more about [PlyrVueOptions](https://github.com/sampotts/plyr#initializing) and [PlyrVueInstance](https://github.com/sampotts/plyr#methods)\r\n\r\n## Usage\r\n\r\n### Video\r\n\r\nPlyr Vue allows you to create interactive video players effortlessly. Customize the playback experience by specifying various options.\r\n\r\n#### Instance\r\n\r\nThis example shows how to use the usePlyrVue hook to create a video player instance.\r\n\r\nYou can read more about [.source](https://github.com/sampotts/plyr#the-source-setter)\r\n\r\n```ts\r\n\r\n\r\n\r\n \r\n\r\n```\r\n\r\n#### Template\r\n\r\nThis example demonstrates how to create a video player using the HTML5 media element.\r\n\r\nYou can read more about [HTML5 media element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement)\r\n\r\n```ts\r\n\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n```\r\n\r\n### Iframe\r\n\r\nIntegrate responsive iframes with customized settings using Plyr Vue's iframe component. Control embedded content seamlessly.\r\n\r\n#### Instance\r\n\r\nThis example shows how to create an iframe player instance.\r\n\r\n```ts\r\n\r\n\r\n\r\n \r\n \r\n
\r\n \r\n
\r\n \r\n\r\n```\r\n\r\n### Audio\r\n\r\nEnhance audio playback in your Vue applications with Plyr Vue's audio component. Configure audio-specific options to suit your needs.\r\n\r\n#### Instance\r\n\r\nThis example shows how to create an audio player instance.\r\n\r\n```ts\r\n\r\n\r\n\r\n \r\n \r\n \r\n\r\n```\r\n\r\n## Plyr related options\r\n\r\nSee plyr [documentation](https://github.com/sampotts/plyr#initializing) for all possible options & methods.\r\n","readmeFilename":"README.md","homepage":"https://github.com/cothvbdnnn/plyr-vue#readme","keywords":["HTML5 Video","HTML5 Audio","Media Player","HLS","Plyr","Vue"],"repository":{"type":"git","url":"git://github.com/cothvbdnnn/plyr-vue.git"},"author":{"name":"Kuu"},"license":"MIT","bugs":{"url":"https://github.com/cothvbdnnn/plyr-vue/issues"}}