{"_id":"@altinget/vue-plyr","_rev":"3-281d266b91d80fa9810c157fd273ff70","name":"@altinget/vue-plyr","dist-tags":{"latest":"7.0.0"},"versions":{"7.0.0":{"name":"@altinget/vue-plyr","version":"7.0.0","description":"A vue component for the plyr video & audio player.","license":"MIT","author":{"name":"Gabe Dunn","email":"gabe@redxtech.ca","url":"https://gabedunn.dev"},"repository":{"type":"git","url":"git+https://github.com/nichlasbresch/vue-plyr.git"},"scripts":{"prebuild":"rm -rf dist/","build":"NODE_ENV=production rollup --c rollup.config.js","build:es":"NODE_ENV=production rollup --c rollup.config.js --format=es","build:es:watch":"NODE_ENV=production rollup --c rollup.config.js --format=es --watch","build:cjs":"NODE_ENV=production rollup --c rollup.config.js --format=cjs","build:cjs:watch":"NODE_ENV=production rollup --c rollup.config.js --format=cjs --watch","build:iife":"NODE_ENV=production rollup --c rollup.config.js --format=iife","build:iife:watch":"NODE_ENV=production rollup --c rollup.config.js --format=iife --watch","lint":"vue-cli-service lint -f pretty"},"main":"dist/vue-plyr.ssr.js","module":"dist/vue-plyr.esm.js","unpkg":"dist/vue-plyr.min.js","style":"dist/vue-plyr.css","dependencies":{"plyr":"^3.6.8","vue":"^2.6.12"},"devDependencies":{"@babel/plugin-transform-runtime":"^7.12.1","@rollup/plugin-babel":"^5.2.1","@rollup/plugin-commonjs":"^16.0.0","@rollup/plugin-node-resolve":"^10.0.0","@rollup/plugin-replace":"^2.3.4","@vue/cli-plugin-babel":"^4.5.8","@vue/cli-plugin-eslint":"^4.5.8","@vue/cli-service":"^4.5.8","@vue/compiler-sfc":"^3.0.2","@vue/eslint-config-prettier":"^6.0.0","babel-eslint":"^10.1.0","core-js":"^3.6.5","eslint":"^7.12.1","eslint-formatter-pretty":"^4.0.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-vue":"^7.1.0","minimist":"^1.2.5","prettier":"^2.1.2","rollup":"^2.33.0","rollup-plugin-css-only":"^2.1.0","rollup-plugin-filesize":"^9.0.2","rollup-plugin-terser":"^7.0.2","rollup-plugin-vue":"^6.0.0-beta.11","vue-template-compiler":"^2.6.12"},"keywords":["vue-plyr","vue","plyr","video","audio","youtube","vimeo","media","player","js","javascript","rollup"],"gitHead":"0a3720438847ed82c92cd732d3a51333ec79d62e","bugs":{"url":"https://github.com/nichlasbresch/vue-plyr/issues"},"homepage":"https://github.com/nichlasbresch/vue-plyr#readme","_id":"@altinget/vue-plyr@7.0.0","_nodeVersion":"14.18.1","_npmVersion":"8.1.3","dist":{"integrity":"sha512-gS93gRtHGBW9plW10ymba/U2CtW07M/QJ5k5g+fIHHAceOnVUdAFTxRhd+OEkU5tjX7IkiBSuH5R2r9h9yL8og==","shasum":"6009e733bc3631d2248631b691fbbe65b2860527","tarball":"https://registry.npmjs.org/@altinget/vue-plyr/-/vue-plyr-7.0.0.tgz","fileCount":17,"unpackedSize":7304990,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2CWnCRA9TVsSAnZWagAAUrcP/j7G0mqAJfIpSsGDBEvB\nzYV31SZis2v0Yoi8VnNX/Oo2MKqjr+Wbl8m6ikQklbxDn2aVjtLpKCy0Nzo0\nYwa/eAslX7YuHNaqvEKDZM6VAifddWwf6N+RNREDz7yvk9o3QyRLgO41Rsgo\n7oLIhynd1sIujaUlGFQg7CICbAKEVpn8ytq/+XoGbBUvkQMo7Isb34WgkWdy\nplh0Vw9KfEoWvA4LLGrMAFaTvzIIEDCtwaqPgP9RTXvg3RRoBe5I3aPCCwW/\nk3JTT1JR6jdQauo+q+bPgIjjSB1l6gfhu+upRUImNnIO/CfFaoVVYyLcXoC8\nF67zG2dFGWaOvvt+JlTHVSbOJcZ7oJwplczTEkLfzInQ3QXTk6qfaT34w1gm\nVJnrg7RSxZyT6d6e0Cos7BB4k6DSUrla14jq6LLS/EVqrOjCTob7szdsKPiG\nGWvxoOnVD7B4l9P0zM3VHeEb2zHcMcCGQIZDGvyW3BnsOCYkiOl9smKG6H9U\nMVqEQ+Aa5JruuQx/BjL835v1X0C+FqxEw6g8yb+bsh0yKY9u+V2A47XpnOUd\n+4/RHs9PTTKMmSclUPHr1aB+uziCNqmuonOYtSAf2ZOLO5T8vzR0JMmIfcUS\nrDfWRlKUE5M4h2uXkNUre1wrZmLzOLETdx91MsqLrhqUts4Gb8t3tHIsOLVM\nC0bA\r\n=nZE8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYS49jCj83UsX/k83R4LENhZdfCI1Z93y9lp6BAThADQIgQo0gn54zU7JfRneoXq/4BOjrM8X8nEOuH+y3eOYESJc="}]},"_npmUser":{"name":"nichlas900","email":"nichlasbrodegaardlarsson@gmail.com"},"directories":{},"maintainers":[{"name":"nichlas900","email":"nichlasbrodegaardlarsson@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/vue-plyr_7.0.0_1641555366897_0.2894651852901222"},"_hasShrinkwrap":false}},"time":{"created":"2022-01-07T11:36:06.823Z","7.0.0":"2022-01-07T11:36:07.137Z","modified":"2022-07-14T09:14:09.764Z"},"maintainers":[{"email":"pgn@altinget.dk","name":"pgraug"},{"email":"mike@altinget.dk","name":"mikealtinget"},{"email":"nichlasbrodegaardlarsson@gmail.com","name":"nichlas900"}],"description":"A vue component for the plyr video & audio player.","homepage":"https://github.com/nichlasbresch/vue-plyr#readme","keywords":["vue-plyr","vue","plyr","video","audio","youtube","vimeo","media","player","js","javascript","rollup"],"repository":{"type":"git","url":"git+https://github.com/nichlasbresch/vue-plyr.git"},"author":{"name":"Gabe Dunn","email":"gabe@redxtech.ca","url":"https://gabedunn.dev"},"bugs":{"url":"https://github.com/nichlasbresch/vue-plyr/issues"},"license":"MIT","readme":"# vue-plyr\n> v7.0.0 - [Changelog](https://github.com/redxtech/vue-plyr/blob/master/changelog.md)\n\nA vue component for the plyr video & 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<script type=\"text/javascript\" src=\"https://unpkg.com/vue\"></script>\n<script type=\"text/javascript\" src=\"https://unpkg.com/vue-plyr\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/vue-plyr/dist/vue-plyr.css\" />\n\n<!-- You will also need to install the component during app creation -->\n<script>\n  window.Vue.createApp(VuePlyr).mount('#app')\n</script>\n```\n\n## Usage\nOnce installed, it can be used in a template as simply as:\n\n```vue\n<!-- video element -->\n<vue-plyr :options=\"options\">\n  <video\n    controls\n    crossorigin\n    playsinline\n    data-poster=\"poster.jpg\"\n  >\n    <source\n      size=\"720\"\n      src=\"/path/to/video-720p.mp4\"\n      type=\"video/mp4\"\n    />\n    <source\n      size=\"1080\"\n      src=\"/path/to/video-1080p.mp4\"\n      type=\"video/mp4\"\n    />\n    <track\n      default\n      kind=\"captions\"\n      label=\"English captions\"\n      src=\"/path/to/english.vtt\"\n      srclang=\"en\"\n    />\n  </video>\n</vue-plyr>\n\n<!-- audio element -->\n<vue-plyr>\n  <audio controls crossorigin playsinline>\n    <source\n        src=\"/path/to/audio.mp3\"\n        type=\"audio/mp3\"\n    />\n    <source\n        src=\"/path/to/audio.ogg\"\n        type=\"audio/ogg\"\n    />\n  </audio>\n</vue-plyr>\n\n<!-- youtube iframe with progressive enhancement (extra queries after the url to optimize the embed) -->\n<vue-plyr>\n  <div class=\"plyr__video-embed\">\n    <iframe\n      src=\"https://www.youtube.com/embed/bTqVqk7FSmY?amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1\"\n      allowfullscreen\n      allowtransparency\n      allow=\"autoplay\"\n    ></iframe>\n  </div>\n</vue-plyr>\n\n<!-- youtube div element -->\n<vue-plyr>\n  <div data-plyr-provider=\"youtube\" data-plyr-embed-id=\"bTqVqk7FSmY\"></div>\n</vue-plyr>\n\n<!-- vimeo iframe with progressive enhancement (extra queries after the url to optimize the embed) -->\n<vue-plyr>\n  <div class=\"plyr__video-embed\">\n    <iframe\n      src=\"https://player.vimeo.com/video/143418951?loop=false&amp;byline=false&amp;portrait=false&amp;title=false&amp;speed=true&amp;transparent=0&amp;gesture=media\"\n      allowfullscreen\n      allowtransparency\n      allow=\"autoplay\"\n    ></iframe>\n  </div>\n</vue-plyr>\n\n<!-- vimeo div element -->\n<vue-plyr>\n  <div data-plyr-provider=\"vimeo\" data-plyr-embed-id=\"143418951\"></div>\n</vue-plyr>\n```\n\n## Player Instance\nTo access the player instance, you can use the `player` property from the `refs` attribute.\n\n```html\n<template>\n  <vue-plyr ref=\"plyr\">...</vue-plyr>\n</template>\n\n<script>\n  export default {\n    name: 'Component',\n    mounted () {\n      console.log(this.$refs.plyr.player)\n    }\n  }\n</script>\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<template>\n  <vue-plyr ref=\"plyr\">...</vue-plyr>\n</template>\n<script>\n  export default {\n    name: 'Component',\n    mounted () {\n      this.$refs.plyr.player.on('event', () => console.log('event fired'))\n    }\n</script>\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","readmeFilename":"README.md"}