{"id":13495319,"url":"https://github.com/redxtech/vue-plyr","last_synced_at":"2025-04-13T18:33:51.843Z","repository":{"id":37952194,"uuid":"119009165","full_name":"redxtech/vue-plyr","owner":"redxtech","description":"A Vue component for the plyr (https://github.com/sampotts/plyr) video \u0026 audio player.","archived":false,"fork":false,"pushed_at":"2023-01-07T22:03:47.000Z","size":3922,"stargazers_count":778,"open_issues_count":140,"forks_count":137,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-02-19T13:46:51.496Z","etag":null,"topics":["audio","audio-player","component","hacktoberfest","plyr","plyr-plugin","video","video-player","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/redxtech.png","metadata":{"files":{"readme":"README.md","changelog":"changelog.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-26T05:22:31.000Z","updated_at":"2025-02-18T02:43:02.000Z","dependencies_parsed_at":"2023-02-08T02:31:56.472Z","dependency_job_id":null,"html_url":"https://github.com/redxtech/vue-plyr","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redxtech%2Fvue-plyr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redxtech%2Fvue-plyr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redxtech%2Fvue-plyr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/redxtech%2Fvue-plyr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/redxtech","download_url":"https://codeload.github.com/redxtech/vue-plyr/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248760409,"owners_count":21157352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-player","component","hacktoberfest","plyr","plyr-plugin","video","video-player","vue"],"created_at":"2024-07-31T19:01:33.498Z","updated_at":"2025-04-13T18:33:51.799Z","avatar_url":"https://github.com/redxtech.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","UI组件","Components \u0026 Libraries","UI Components","Table of Contents","UI Components [🔝](#readme)"],"sub_categories":["音频视频","UI Components","Audio / Video","Video Libraries"],"readme":"# vue-plyr\n\u003e v7.0.0 - [Changelog](https://github.com/redxtech/vue-plyr/blob/master/changelog.md)\n\nA vue component for the plyr video \u0026 audio player.\n\nThis is useful for when you want a nice video player in your Vue app.\n\nIt uses [plyr](https://plyr.io) by [sampotts](https://github.com/sampotts) for the players.\n\nSupported player types: HTML5 video, HTML5 audio, YouTube, and Vimeo.\n\n### Demo\nA demo of the components (equivalent to the html example include here) can be found at\n[redxtech.github.io/vue-plyr](https://redxtech.github.io/vue-plyr/).\n\n## Installation\n```bash\nyarn add vue-plyr # or npm i vue-plyr\n```\n\n### Module\n```js\n// In your main vue file - the one where you create the initial vue instance.\nimport Vue from 'vue'\nimport VuePlyr from 'vue-plyr'\nimport 'vue-plyr/dist/vue-plyr.css'\n\n// Vue 3.x\n// The second argument is optional and sets the default config values for every player.\ncreateApp(App)\n  .use(VuePlyr, {\n    plyr: {}\n  })\n  .mount('#app')\n\n// Vue 2.x\n// The second argument is optional and sets the default config values for every player.\nVue.use(VuePlyr, {\n  plyr: {}\n})\n```\n\n### SSR [(more below)](#ssr)\nFor SSR, you can import the SSR optimized module, found at `dist/vue-plyr.ssr.js`. There is a more in depth description\non how to use it with [nuxt](#nuxt) below.\n\n### Browser\nIn the browser you can include it as you would any other package with unpkg, along with the stylesheet:\n\n```html\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue\"\u003e\u003c/script\u003e\n\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/vue-plyr\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/vue-plyr/dist/vue-plyr.css\" /\u003e\n\n\u003c!-- You will also need to install the component during app creation --\u003e\n\u003cscript\u003e\n  window.Vue.createApp(VuePlyr).mount('#app')\n\u003c/script\u003e\n```\n\n## Usage\nOnce installed, it can be used in a template as simply as:\n\n```vue\n\u003c!-- video element --\u003e\n\u003cvue-plyr :options=\"options\"\u003e\n  \u003cvideo\n    controls\n    crossorigin\n    playsinline\n    data-poster=\"poster.jpg\"\n  \u003e\n    \u003csource\n      size=\"720\"\n      src=\"/path/to/video-720p.mp4\"\n      type=\"video/mp4\"\n    /\u003e\n    \u003csource\n      size=\"1080\"\n      src=\"/path/to/video-1080p.mp4\"\n      type=\"video/mp4\"\n    /\u003e\n    \u003ctrack\n      default\n      kind=\"captions\"\n      label=\"English captions\"\n      src=\"/path/to/english.vtt\"\n      srclang=\"en\"\n    /\u003e\n  \u003c/video\u003e\n\u003c/vue-plyr\u003e\n\n\u003c!-- audio element --\u003e\n\u003cvue-plyr\u003e\n  \u003caudio controls crossorigin playsinline\u003e\n    \u003csource\n        src=\"/path/to/audio.mp3\"\n        type=\"audio/mp3\"\n    /\u003e\n    \u003csource\n        src=\"/path/to/audio.ogg\"\n        type=\"audio/ogg\"\n    /\u003e\n  \u003c/audio\u003e\n\u003c/vue-plyr\u003e\n\n\u003c!-- youtube iframe with progressive enhancement (extra queries after the url to optimize the embed) --\u003e\n\u003cvue-plyr\u003e\n  \u003cdiv class=\"plyr__video-embed\"\u003e\n    \u003ciframe\n      src=\"https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3\u0026amp;modestbranding=1\u0026amp;playsinline=1\u0026amp;showinfo=0\u0026amp;rel=0\u0026amp;enablejsapi=1\"\n      allowfullscreen\n      allowtransparency\n      allow=\"autoplay\"\n    \u003e\u003c/iframe\u003e\n  \u003c/div\u003e\n\u003c/vue-plyr\u003e\n\n\u003c!-- youtube div element --\u003e\n\u003cvue-plyr\u003e\n  \u003cdiv data-plyr-provider=\"youtube\" data-plyr-embed-id=\"bTqVqk7FSmY\"\u003e\u003c/div\u003e\n\u003c/vue-plyr\u003e\n\n\u003c!-- vimeo iframe with progressive enhancement (extra queries after the url to optimize the embed) --\u003e\n\u003cvue-plyr\u003e\n  \u003cdiv class=\"plyr__video-embed\"\u003e\n    \u003ciframe\n      src=\"https://player.vimeo.com/video/143418951?loop=false\u0026amp;byline=false\u0026amp;portrait=false\u0026amp;title=false\u0026amp;speed=true\u0026amp;transparent=0\u0026amp;gesture=media\"\n      allowfullscreen\n      allowtransparency\n      allow=\"autoplay\"\n    \u003e\u003c/iframe\u003e\n  \u003c/div\u003e\n\u003c/vue-plyr\u003e\n\n\u003c!-- vimeo div element --\u003e\n\u003cvue-plyr\u003e\n  \u003cdiv data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"143418951\"\u003e\u003c/div\u003e\n\u003c/vue-plyr\u003e\n```\n\n## Player Instance\nTo access the player instance, you can use the `player` property from the `refs` attribute.\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-plyr ref=\"plyr\"\u003e...\u003c/vue-plyr\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    name: 'Component',\n    mounted () {\n      console.log(this.$refs.plyr.player)\n    }\n  }\n\u003c/script\u003e\n```\n\n## Examples\nExamples of how to use this app can be found [here](https://github.com/redxtech/vue-plyr/tree/master/examples).\n\n## Events\nIf you want to capture events from the plyr instance, you can do so by accessing the player instance through the `ref`\nattribute and using that object for events, as you would with a vanilla plyr instance.\n\nValid events are [here](https://github.com/sampotts/plyr#events).\n\n```html\n\u003ctemplate\u003e\n  \u003cvue-plyr ref=\"plyr\"\u003e...\u003c/vue-plyr\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  export default {\n    name: 'Component',\n    mounted () {\n      this.$refs.plyr.player.on('event', () =\u003e console.log('event fired'))\n    }\n\u003c/script\u003e\n```\n\n## Options\nFor custom options you can pass an `options` prop which is an object that will be passed to the `new Plyr()` creation.\nAvailable options\n[here](https://github.com/sampotts/plyr#options). I have added a new option (`hideYouTubeDOMError`) that hides the error\nthat is always logged when destroying a YouTube player. It defaults to `true`, and you can disable it and see the error\nby setting it to false.\n\nYou can also specify the default options when registering the plugin\n(these will be ignored if you specify a player-specific options object via props):\n\n```js\ncreateApp(App).use(VuePlyr, {\n  plyr: {}\n})\n```\n\n## SSR\n### Nuxt (Vue 2.x)\nThis should support SSR out of the box. For [nuxt](https://nuxtjs.org/), create a file called `vue-plyr.js` in your\nplugins folder containing only these three statements:\n\n```js\nimport Vue from 'vue'\nimport VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'\nimport 'vue-plyr/dist/vue-plyr.css'\n\n// The second argument is optional and sets the default config values for every player.\nVue.use(VuePlyr, {\n  plyr: {}\n})\n```\n\nThen, in your `nuxt.config.js` file add `{ src: '~/plugins/vue-plyr', mode: 'client' }` to the plugins array. The\n`vue-plyr` element should be globally registered now.\n\nThe `nuxt.config.js` file should at minimum include this:\n\n```js\nexport default {\n  plugins: [{ src: '~/plugins/vue-plyr', mode: 'client' }]\n}\n```\n\n## Author\n\n**vue-plyr** © [RedXTech](https://github.com/redxtech), Released under the [MIT](./LICENSE.md) License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredxtech%2Fvue-plyr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fredxtech%2Fvue-plyr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fredxtech%2Fvue-plyr/lists"}