Gathering detailed insights and metrics for vue-video-control
Gathering detailed insights and metrics for vue-video-control
Gathering detailed insights and metrics for vue-video-control
Gathering detailed insights and metrics for vue-video-control
@joyfulljs/vue-video-control-bar
a simple vide control bar
custom-range-slider-controller
This is a default range slider alternative for volume/video/audio progress control created with **Vue Js**. Stop using input type="range" for volume or audio/video progress control in a audio/video platform. To help you, I made a **Custom Range Slider Co
A html5 video player component of vue. Include video controller / video preview / power progress bar and so on
npm install vue-video-control
Typescript
Module System
Node Version
NPM Version
62.8
Supply Chain
94.9
Quality
75.3
Maintenance
50
Vulnerability
99.6
License
Vue (70.97%)
CSS (21.34%)
JavaScript (6.26%)
HTML (1.43%)
Total Downloads
1,221
Last Day
1
Last Week
5
Last Month
30
Last Year
160
17 Commits
1 Forks
1 Watchers
25 Branches
1 Contributors
Updated on Jul 16, 2020
Minified
Minified + Gzipped
Latest Version
0.3.1
Package Id
vue-video-control@0.3.1
Unpacked Size
4.49 MB
Size
3.97 MB
File Count
45
NPM Version
6.14.4
Node Version
12.16.3
Cumulative downloads
Total Downloads
Last Day
0%
1
Compared to previous day
Last Week
0%
5
Compared to previous week
Last Month
76.5%
30
Compared to previous month
Last Year
18.5%
160
Compared to previous year
A html5 video player component of vue.
Include video controller / video preview / power progress bar / danmaku and so on
You can install vue-video-control by npm.
1$ npm install vue-video-control
cnpm mirror is recommended if you are in Mainland China.
1import VideoControl from 'vue-video-control' 2 3Vue.use(VideoControl)
1<template> 2 <video-control ref="videoControl" class="video-control" :options="videoOptions"></video-control> 3</template> 4 5<script> 6 export default { 7 data () { 8 return { 9 videoOptions: { 10 src: 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' 11 } 12 } 13 } 14 } 15</script>
options | type | default | instruction |
---|---|---|---|
src | string | '' | Indicates media URL |
autoplay | boolean | false | Do auto play the video |
poster | string | '' | The poster image url of video |
control.show | boolean | true | Display control bar |
control.focusPreview.show | boolean | false | Display focus preview bar |
control.focusPreview.data | array | [1] | The data array of focus preview bar |
control.videoPreview.show | boolean | false | Display video preview image |
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 |
control.videoPreview.totalNum | number | 10 | Number of the sprite image |
control.videoTimer.show | boolean | true | Display video <current time / duration> timer |
control.speedBtn.show | boolean | true | Display the button to change playback speed |
control.speedBtn.speedArray | array | [0.5, 0.75, 1, 1.5, 2] | Playback speed options |
control.volumeBtn.show | boolean | true | Display the button to change volume |
control.fullScreenBtn.show | boolean | true | Display the button to toggle full screen |
danmaku.show | boolean | true | Display the danmaku and danmaku control |
danmaku.fontSize | number | 25 | The font size of danmaku |
danmaku.rowNum | number | 5 | The maximum number of lines of danmaku |
danmaku.speed | number | 80 | Rolling speed of danmaku |
danmaku.data | array | [] | Danmaku data array |
danmaku.onSendDanmaku | Function | Triggered after the danmaku is sent |
1this.videoOptions.control.focusPreview.data = await getData() 2this.videoOptions.control.focusPreview.show = true 3this.$refs.videoControl.refreshOptions()
Refresh the component options
See Media events
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
no SAST tool detected
Details
Reason
Found 0/17 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
license file not detected
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
91 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-05-05
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More