{"id":16751752,"url":"https://github.com/zcuric/plyrue","last_synced_at":"2025-08-04T23:10:33.162Z","repository":{"id":34956817,"uuid":"175806461","full_name":"zcuric/plyrue","owner":"zcuric","description":"Vue.js plugin for Plyr.io","archived":false,"fork":false,"pushed_at":"2023-01-07T04:07:45.000Z","size":2799,"stargazers_count":31,"open_issues_count":13,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-26T10:26:32.802Z","etag":null,"topics":["audio","js","plyr","video","vue"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zcuric.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-15T11:20:02.000Z","updated_at":"2022-06-21T02:03:58.000Z","dependencies_parsed_at":"2023-01-15T11:01:27.213Z","dependency_job_id":null,"html_url":"https://github.com/zcuric/plyrue","commit_stats":null,"previous_names":[],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/zcuric/plyrue","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fplyrue","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fplyrue/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fplyrue/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fplyrue/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zcuric","download_url":"https://codeload.github.com/zcuric/plyrue/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zcuric%2Fplyrue/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268800281,"owners_count":24309417,"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","status":"online","status_checked_at":"2025-08-04T02:00:09.867Z","response_time":79,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","js","plyr","video","vue"],"created_at":"2024-10-13T02:44:48.367Z","updated_at":"2025-08-04T23:10:33.110Z","avatar_url":"https://github.com/zcuric.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"#\"\u003e\n    \u003cimg width=\"150\"src=\"./docs/logo.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003ePlyrue\u003c/h1\u003e\n\u003cp align=\"center\"\u003eVue.js plugin for \u003ca href=\"https://plyr.io\"\u003ePlyr\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\u003ca href=\"https://www.npmjs.com/package/plyrue\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/plyrue.svg\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://vuejs.org/\"\u003e\u003cimg src=\"https://img.shields.io/badge/vue-2.x-brightgreen.svg\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://circleci.com/gh/zcuric/plyrue\"\u003e\n\u003cimg src=\"https://circleci.com/gh/zcuric/plyrue/tree/master.svg?style=svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## About\n\nPlyrue (/pliru/) is a Vue plugin that is actually a wrapper around popular media player, [Plyr](https://plyr.io). It provides a simple API to work with Vue applications.\n\n## Installation\n\n```\nnpm install plyrue\n# or\nyarn add plyrue\n```\n\n## Initialization\n\n```js\nimport App from './App.vue';\nimport Plyrue from 'plyrue';\nimport Vue from 'vue';\n\nVue.use(Plyrue);\n\nnew Vue({\n  render: h =\u003e h(App),\n}).$mount('#app');\n```\n\nPlyrue component can be used in without plugin initialization:\n```js\nimport { PlyrueComponent as Plyrue } from 'plyrue';\n...\nexport default { \n  ...\n  components: { Plyrue }\n}\n```\n\n\n## Usage\n\nPlyrue can be used in two ways:\n\n- with slots\n- with data (for audio and video)\n\n### With slots\n\n```vue\n\u003cplyrue\n  type=\"video\"\n  poster=\"https://example.com/video-HD.jpg\"\n  src=\"https://example.com/video-576p.mp4\"\n  :options=\"options\"\n  crossorigin\n\u003e\n  \u003csource\n    src=\"https://example.com/video-576p.mp4\"\n    type=\"video/mp4\"\n    size=\"576\"\n  \u003e\n  \u003ctrack\n    kind=\"captions\"\n    label=\"English\"\n    srclang=\"en\"\n    src=\"https://example.com/video-HD.en.vtt\"\n    default\n  \u003e\n\u003c/plyrue\u003e\n```\n\nWhen using slot the `video` or `audio` tag is omitted if the `type` props is set. If `type` is not set the `default` component will be used and in that case you must include the `video` or `audio` tag. Example:\n\n```vue\n\u003cplyrue\u003e\n  \u003cvideo\n    controls\n    src=\"https://example.com/video-576p.mp4\"\n  \u003e\n    \u003csource\n      src=\"https://example.com/video-1080p.mp4\"\n      type=\"video/mp4\"\n      size=\"1080\"\n    \u003e\n    \u003ctrack\n      kind=\"captions\"\n      label=\"English\"\n      srclang=\"en\"\n      src=\"https://example.com/video-HD.en.vtt\"\n      default\n    \u003e\n    \u003ca\n      href=\"https://example.com/video-576p.mp4\"\n      download\n    \u003eDownload\u003c/a\u003e\n  \u003c/video\u003e\n\u003c/plyrue\u003e\n```\n\n### With data\n\n```vue\n\u003ctemplate\u003e\n  \u003cplyrue\n    poster=\"https://example.com/video-HD.jpg\"\n    src=\"https://example.com/video-576p.mp4\"\n    type=\"video\"\n    ref=\"plyrue\"\n    :sources=\"sources\"\n    :captions=\"captions\"\n  /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  data() {\n    return {\n      sources: [\n        {\n          src: 'https://example.com/video-576p.mp4',\n          type: 'video/mp4',\n          size: '576',\n        },\n      ],\n      captions: [\n        {\n          label: 'Croatian',\n          srclang: 'hr',\n          src: 'https://example.com/video-HD.hr.vtt',\n        },\n      ],\n    };\n  },\n};\n\u003c/script\u003e\n```\n\n## Plugin options\n\n```\nVue.use(Plyrue, pluginOptions)\n```\n\n### name\n\n- **Type**: `string`\n- **Default**: `plyrue`.\n\nThe plugin name.\n\n## Props\n\n### type\n\n- **Type**: `string`\n- **Default**: `default`\n\nType of media you want use\n\n- `video` for HTML5 video\n- `audio` for HTML5 audio\n- `embed` for Youtube and Vimeo.\n\nIf type is unspecified it will default to a `default` component which only proxies the slot.\n\nFor examples and usage please check the [examples folder](https://github.com/zcuric/plyrue/tree/master/example).\n\n### options\n\n- **Type**: `Object`\n- **Default**: `{}`\n\nOptions for Plyr player. Documentation for Plyr options can be found [here](https://github.com/sampotts/plyr#options).\n\n### sources\n\n- **Type**: `Array`\n- **Required**: false\n\nArray of objects. For videos:\n\n```js\n[\n  {\n    src: 'https://example.com/video.mp4',\n    type: 'video/mp4', // or any other valid type\n    size: '576' // example size\n  },\n  ...\n]\n```\n\nFor audio:\n\n```js\n [\n  {\n    src: 'https://example.com/video.m24',\n    type: 'audio/mp3', // or any other valid type\n  },\n  ...\n]\n```\n\n### captions\n\n- **Type**: `Array`\n- **Required**: false\n\nArray of objects. Captions for video type:\n\n```js\n[\n  {\n    label: 'Croatian',\n    srclang: 'hr',\n    src:'https://example.com/caption.hr.vtt',\n  },\n],\n...\n```\n\n## Attributes\n\nAll valid attributes for `video`, `audio` and `iframe` are passed down to the corresponding components. `Plyrue` provides defaults for `video` and `audio`.\n\nCheck the valid attributes here:\n\n- [video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#Attributes)\n- [audio](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio#Attributes)\n- [iframe](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)\n\nExample:\n\n```vue\n\u003cplyrue type=\"audio\" :sources=\"audio\" autoplay loop /\u003e\n```\n\n## Events\n\n`Plyrue` component supports `plyr` events.\nEvents are documented [here](https://github.com/sampotts/plyr#events).\n\n```vue\n\u003ctemplate\u003e\n  \u003cplyrue @playing=\"handlePlaying\" ... /\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  methods: { \n    handlePlaying(event) {}\n  }\n};\n\u003c/script\u003e\n```\n\n\n## Development\n\n```\n# Running examples\nnpm run serve\n\n# Running tests\nnpm run test\n\n# Running build\nnpm run build\n```\n\n## TODO\n\n- Rewrite in TS\n- Make documentation better\n- Check SSR compatibility\n- Provide more examples\n\n## Contributing\n\nAll contributions are welcome.\n\n## Credits\n\n`Plyrue` is inspired by [`vue-plyr`](https://github.com/redxtech/vue-plyr).\n\n## License\n\nMIT @ Zdravko Ćurić [(zcuric)](https://github.com/zcuric)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcuric%2Fplyrue","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzcuric%2Fplyrue","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzcuric%2Fplyrue/lists"}