{"id":25271314,"url":"https://github.com/display-design-studio/vue-player","last_synced_at":"2025-10-27T08:31:41.326Z","repository":{"id":218870060,"uuid":"745425163","full_name":"display-design-studio/vue-player","owner":"display-design-studio","description":"Vue Video Player - Lightweight, customizable, and easy-to-implement vue video player.","archived":false,"fork":false,"pushed_at":"2024-08-06T12:13:23.000Z","size":10199,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-08T14:48:48.362Z","etag":null,"topics":["dx","lightweight","open-source","video","video-player","videos","vue","vue3"],"latest_commit_sha":null,"homepage":"https://display-design-studio.github.io/vue-player/","language":"Vue","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/display-design-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-19T10:01:36.000Z","updated_at":"2025-05-14T07:58:40.000Z","dependencies_parsed_at":"2024-03-26T15:53:54.826Z","dependency_job_id":"b003b366-89ea-4aa7-b4ae-36d9640b4e8b","html_url":"https://github.com/display-design-studio/vue-player","commit_stats":null,"previous_names":["display-design-studio/vue-player"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/display-design-studio/vue-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/display-design-studio%2Fvue-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/display-design-studio%2Fvue-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/display-design-studio%2Fvue-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/display-design-studio%2Fvue-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/display-design-studio","download_url":"https://codeload.github.com/display-design-studio/vue-player/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/display-design-studio%2Fvue-player/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281239263,"owners_count":26467058,"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-10-27T02:00:05.855Z","response_time":61,"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":["dx","lightweight","open-source","video","video-player","videos","vue","vue3"],"created_at":"2025-02-12T12:23:04.047Z","updated_at":"2025-10-27T08:31:41.013Z","avatar_url":"https://github.com/display-design-studio.png","language":"Vue","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Components"],"readme":"# Vue Player\n![NPM Version](https://img.shields.io/npm/v/%40display-studio%2Fvue-player?style=plastic\u0026label=npm\u0026labelColor=%23000000\u0026color=%23FFFFFF\u0026link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40display-studio%2Fvue-player)\n![NPM Downloads](https://img.shields.io/npm/dm/%40display-studio%2Fvue-player?style=plastic\u0026label=downloads\u0026labelColor=%23000000\u0026color=%23FFFFFF\u0026link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40display-studio%2Fvue-player)\n![NPM Unpacked Size](https://img.shields.io/npm/unpacked-size/%40display-studio%2Fvue-player?style=plastic\u0026label=size\u0026labelColor=%23000000\u0026color=%23FFFFFF\u0026link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2F%40display-studio%2Fvue-player)\n\n## Introduction\n\nLightweight, customizable, and easy-to-implement vue video player.\n\n## Installation\n\n```bash\n$ npm i @display-studio/vue-player\n```\n\n## Setup\n\n```js\n\u003cscript setup\u003e\nimport { VuePlayer } from '@display-studio/vue-player'\n\nconst sources = [\n  {\n    src: 'YOUR_URL',\n    type: 'video/mp4',\n    media: \"(min-width: 900px)\"\n  },\n  {\n    src: 'YOUR_URL_MOBILE',\n    type: 'video/mp4',\n  }\n]\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cVuePlayer class=\"vue-player\" :sources=\"sources\" poster=\"...\" @play=\"...\"\u003e\n            // Your custom controls here\n        \u003c/VuePlayer\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n  .vue-player {\n    width: 100%;\n    position: relative;\n    height: fit-content;\n    line-height: 0;\n\n    video {\n      width: 100%;\n      height: auto;\n    }\n  }\n\u003c/style\u003e\n```\n\n## Nuxt Integration\nThe library is easy to implement in any Nuxt project.\nRemember to wrap it on the ```\u003cClientOnly\u003e``` component.\n\n```js\n\u003cscript setup\u003e\nimport { VuePlayer } from '@display-studio/vue-player'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cClientOnly\u003e\n        \u003cVuePlayer class=\"vue-player\" :sources=\"sources\" poster=\"...\" @play=\"...\"\u003e\n            // Your custom controls here\n        \u003c/VuePlayer\u003e\n    \u003c/ClientOnly\u003e\n\u003c/template\u003e\n```\n\n## Custom Controls\n\nYou can disable the native video tag controls and use your own custom ones.\n\n#### Example:\n\n`App.vue`\n\n```js\n\u003cscript setup\u003e\nimport { VuePlayer } from '@display-studio/vue-player'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cVuePlayer :sources=\"...\" :autoplay=\"true\" :muted=\"true\"\u003e\n          \u003c!--useVuePlayer() within a VuePlayer instance --\u003e\n            \u003cMyControls /\u003e\n            \u003cMyPlayerDuration /\u003e\n            \u003cMyPlayerTrack /\u003e\n        \u003c/VuePlayer\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n```\n\n`MyControls.vue`\n\n```js\n\u003cscript setup\u003e\nimport { useVuePlayer } from '@display-studio/vue-player'\nconst { playing, togglePlay, toggleMute, videoMuted } = useVuePlayer()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv class=\"vue-player__controls\"\u003e\n    \u003cbutton @click=\"togglePlay()\" class=\"vue-player__controls-toggleplay\"\u003e\n      {{ playing ? \"pause\" : \"play\" }}\n    \u003c/button\u003e\n    \u003cbutton @click=\"toggleMute()\" class=\"vue-player__controls-togglemute\"\u003e\n      {{ videoMuted ? \"unmute\" : \"mute\" }}\n    \u003c/button\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.vue-player__controls {\n  position: absolute;\n  bottom: 0px;\n  right: 0px;\n  display: flex;\n  width: fit-content;\n  gap: 10px;\n  padding: 10px;\n\n}\n\n.vue-player__controls-toggleplay,\n.vue-player__controls-togglemute {\n  flex: 0 0 auto;\n  display: block;\n  background-color: white;\n  border: none;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 18px;\n  text-transform: uppercase;\n  border-radius: 5px;\n  padding: 2px 5px;\n\n}\n\u003c/style\u003e\n```\n\n`MyPlayerDuration.vue`\n\n```js\n\u003cscript setup lang=\"ts\"\u003e\nimport { useVuePlayer } from '@display-studio/vue-player'\nconst { convertTimeToDuration, time, duration } = useVuePlayer()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv class=\"vue-player__timestamp\"\u003e\n        \u003cdiv class=\"vue-player__timestamp-inner\"\u003e\n            \u003cp class=\"vue-player__current-time\"\u003e{{ convertTimeToDuration(time) }}\u003c/p\u003e\n            \u003cp class=\"vue-player__separator\"\u003e/\u003c/p\u003e\n            \u003cp class=\"vue-player__duration\"\u003e{{ convertTimeToDuration(duration) }}\u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.vue-player__timestamp {\n    flex: 2;\n    text-align: center;\n    position: absolute;\n    bottom: 0px;\n    left: 0px;\n    padding: 10px;\n}\n\n.vue-player__timestamp-inner {\n    background-color: white;\n    border-radius: 5px;\n    padding: 2px 5px;\n    font-family: Arial, Helvetica, sans-serif;\n    font-size: 18px;\n    user-select: none;\n\n    p {\n        display: inline-block;\n        line-height: 100%;\n    }\n}\n\n.vue-player__current-time {\n    color: royalblue;\n}\n\n.vue-player__separator {\n    color: royalblue;\n\n}\n\n.vue-player__duration {\n    font-weight: bold;\n    color: black;\n}\n\u003c/style\u003e\n```\n\n`MyPlayerTrack.vue`\n\n```js\n\u003cscript setup lang=\"ts\"\u003e\nimport { useVuePlayer } from '@display-studio/vue-player'\nconst { percentagePlayed, seekToPercentage } = useVuePlayer()\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cdiv class=\"vue-player__video-track\"\u003e\n        \u003cinput type=\"range\" min=\"0\" max=\"100\" step=\"1\" :value=\"percentagePlayed.toFixed(1)\"\n            @input=\"(e) =\u003e seekToPercentage(e.target.value)\" /\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cstyle scoped\u003e\n.vue-player__video-track {\n    padding: 0 0 10px;\n    position: absolute;\n    bottom: 0px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 50%;\n    height: 25px;\n    display: flex;\n    align-items: center;\n}\n\n.vue-player__video-track input[type=\"range\"] {\n    position: relative;\n    overflow: hidden;\n    width: 100%;\n    -webkit-appearance: none;\n    background-color: white;\n    border-radius: 5px;\n    color: black;\n}\n\n.vue-player__video-track input[type=\"range\"]:focus {\n    outline: none;\n}\n\n.vue-player__video-track input[type=\"range\"]::-webkit-slider-runnable-track {\n    height: 6px;\n    -webkit-appearance: none;\n    color: black;\n\n}\n\n.vue-player__video-track input[type=\"range\"]::-webkit-slider-thumb {\n    width: 6px;\n    -webkit-appearance: none;\n    height: 6px;\n    cursor: ew-resize;\n    background: black;\n    box-shadow: -245px 0 0 245px black;\n}\n\u003c/style\u003e\n```\n\n## Provided props in the VuePlayer instance\n\n| Name                     | Type       | Description                                                    |\n| ------------------------ | ---------- | -------------------------------------------------------------- |\n| `togglePlay`             | `Function` | Function to toggle play state                                  |\n| `playing`                | `Boolean`  | Play state                                                     |\n| `toggleMute`             | `Function` | Function to toggle mute state                                  |\n| `videoMuted`             | `Boolean`  | Mute state                                                     |\n| `time`                   | `Number`   | Current video time                                             |\n| `duration`               | `Number`   | Video duration                                                 |\n| `convertTimeToDuration`  | `Function` | Function to convert time                                       |\n| `percentagePlayed`       | `Number`   | Percentage played                                              |\n| `seekToPercentage`       | `Function` | Function to set video current time based on clicked percentage |\n| `openFullScreen`         | `Function` | Enable fullscreen                                              |\n| `togglePictureInPicture` | `Function` | Enable PiP                                                     |\n\n## Props\n\n| Name                | Type      | Required | Default  | Description                                                                                         |\n| ------------------- | --------- | -------- | -------- | --------------------------------------------------------------------------------------------------- |\n| `controls`          | `Boolean` | `false`  | `false`  | Enable native video controls                                                                        |\n| `loop`              | `Boolean` | `false`  | `false`  | Enable video loop                                                                                   |\n| `width`             | `Number`  | `false`  |          | Video width                                                                                         |\n| `height`            | `Number`  | `false`  |          | Video height                                                                                        |\n| `autoplay`          | `Boolean` | `false`  | `false`  | Enable autoplay                                                                                     |\n| `muted`             | `Boolean` | `false`  | `false`  | Mute video at the initialization                                                                    |\n| `poster`            | `String`  | `false`  |          | Source of the poster                                                                                |\n| `preload`           | `String`  | `false`  | `\"auto\"` | Manage video loading [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#preload) |\n| `sources`           | `Array`   | `false`  |          | Sources of the video                                                                                |\n| `togglePlayOnClick` | `Boolean` | `false`  |          | Enable toggle play on click                                                                         |\n\n#### Example:\n\n```js\n\u003ctemplate\u003e\n    \u003cVuePlayer :loop=\"true\" /\u003e\u003c/VuePlayer\u003e\n\u003c/template\u003e\n```\n\n## Events\n\nWe have chosen the following events, but they may change.\n\nSee [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#events) for more info.\n| Event | Description |\n|-----------------------|---------------------------|\n|`play` | Triggered when the video starts |\n|`pause` | Triggered when the video pause |\n|`ended` | Triggered when the video end |\n|`loadeddata` | The loadeddata event is fired when the frame at the current playback position of the media has finished loading; often the first frame. |\n|`waiting` | The waiting event is fired when playback has stopped because of a temporary lack of data. |\n|`playing` | The playing event is fired after playback is first started, and whenever it is restarted. For example, it is fired when playback resumes after having been paused or delayed due to a lack of data. |\n|`timeupdate` | The timeupdate event is fired when the time indicated by the currentTime attribute has been updated.|\n|`canplay` | The canplay event is fired when the user agent can play the media but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |\n|`canplaythrough` | The canplaythrough event is fired when the user agent can play the media and estimates that enough data has been loaded to play the media up to its end without having to stop for further buffering of content. |\n|`statechanged` | Triggered when a state changed |\n\n#### Example:\n\n```js\n\u003cscript setup\u003e\n    import { VuePlayer } from '@display-studio/vue-player'\n\n    const myCustomFunction = ({ event }) =\u003e {\n        console.log(event)\n    }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n    \u003cVuePlayer @play=\"myCustomFunction\"\u003e\u003c/VuePlayer\u003e\n\u003c/template\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdisplay-design-studio%2Fvue-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdisplay-design-studio%2Fvue-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdisplay-design-studio%2Fvue-player/lists"}