{"id":24998175,"url":"https://github.com/geminate/vue-video-control","last_synced_at":"2025-03-29T16:42:35.785Z","repository":{"id":40822372,"uuid":"274356727","full_name":"geminate/vue-video-control","owner":"geminate","description":"A html5 video player component of vue. Include video controller / video preview / power progress bar and so on","archived":false,"fork":false,"pushed_at":"2023-01-06T09:45:46.000Z","size":6481,"stargazers_count":0,"open_issues_count":23,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-12T19:40:06.650Z","etag":null,"topics":["power-progress-bar","video-player","vue"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/geminate.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-23T08:51:48.000Z","updated_at":"2020-07-16T03:35:56.000Z","dependencies_parsed_at":"2023-02-05T20:00:34.240Z","dependency_job_id":null,"html_url":"https://github.com/geminate/vue-video-control","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fvue-video-control","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fvue-video-control/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fvue-video-control/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/geminate%2Fvue-video-control/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/geminate","download_url":"https://codeload.github.com/geminate/vue-video-control/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246215818,"owners_count":20741894,"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":["power-progress-bar","video-player","vue"],"created_at":"2025-02-04T17:39:38.005Z","updated_at":"2025-03-29T16:42:35.763Z","avatar_url":"https://github.com/geminate.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"vue-video-control [![npm](https://img.shields.io/npm/v/vue-video-control)](https://www.npmjs.com/package/vue-video-control) [![npm](https://img.shields.io/npm/l/vue-video-control)](https://www.npmjs.com/package/vue-video-control)\n======\n\nA html5 video player component of vue. \n\nInclude video controller / video preview / power progress bar / danmaku and so on\n\n## Install\n\nYou can install vue-video-control by npm.\n\n```javascript\n$ npm install vue-video-control\n```\n[cnpm](https://github.com/cnpm/cnpm) mirror is recommended if you are in Mainland China.\n\n## Getting Started\n\n* Import vue-video-control at main.js\n\n```js\nimport VideoControl from 'vue-video-control'\n\nVue.use(VideoControl)\n```\n\n* Set options at pages\n\n```vue\n\u003ctemplate\u003e\n  \u003cvideo-control ref=\"videoControl\" class=\"video-control\" :options=\"videoOptions\"\u003e\u003c/video-control\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n  export default {\n    data () {\n      return {\n        videoOptions: {\n          src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'\n        }\n      }\n    }\n  }\n\u003c/script\u003e\n```\n\n## Options\n\n| options                        | type     | default                | instruction\n| --------                       | -----    | -----                  | -----\n| src                            | string   | ''                     | Indicates media URL\n| autoplay                       | boolean  | false                  | Do auto play the video\n| poster                         | string   | ''                     | The poster image url of video\n| control.show                   | boolean  | true                   | Display control bar\n| control.focusPreview.show      | boolean  | false                  | Display focus preview bar\n| control.focusPreview.data      | array    | [1]                    | The data array of focus preview bar \n| control.videoPreview.show      | boolean  | false                  | Display video preview image\n| control.videoPreview.imgUrl    | string   | ''                     | The image url of video preview.The image must be an single line sprite image and each of the part should be 160*90. See /public/video-preview.jpg \n| control.videoPreview.totalNum  | number   | 10                     | Number of the sprite image \n| control.videoTimer.show        | boolean  | true                   | Display video \u003ccurrent time / duration\u003e timer \n| control.speedBtn.show          | boolean  | true                   | Display the button to change playback speed\n| control.speedBtn.speedArray    | array    | [0.5, 0.75, 1, 1.5, 2] | Playback speed options\n| control.volumeBtn.show         | boolean  | true                   | Display the button to change volume\n| control.fullScreenBtn.show     | boolean  | true                   | Display the button to toggle full screen\n| danmaku.show                   | boolean  | true                   | Display the danmaku and danmaku control\n| danmaku.fontSize               | number   | 25                     | The font size of danmaku\n| danmaku.rowNum                 | number   | 5                      | The maximum number of lines of danmaku\n| danmaku.speed                  | number   | 80                     | Rolling speed of danmaku\n| danmaku.data                   | array    | []                     | Danmaku data array\n| danmaku.onSendDanmaku          | Function |                        | Triggered after the danmaku is sent\n\n\n## Methods\n\n#### .refreshOptions()\n```js\nthis.videoOptions.control.focusPreview.data = await getData()\nthis.videoOptions.control.focusPreview.show = true\nthis.$refs.videoControl.refreshOptions()\n```\nRefresh the component options\n\n## Events\n\n#### play / pause / loadStart / canPlay / canplaythrough / waiting / playing / progress / durationChange / seeking / seeked / timeUpdate / ended / error / rateChange / volumeChange\nSee [Media events](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeminate%2Fvue-video-control","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgeminate%2Fvue-video-control","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgeminate%2Fvue-video-control/lists"}