README
vvideo
A simple Vue.js Video component
Demo Here
Installation
npm i @ajmariduena/vvideo --save-dev
Usage
<vvideo
source-webm="http://techslides.com/demos/sample-videos/small.webm"
source-ogg="http://techslides.com/demos/sample-videos/small.ogv"
source-mp4="http://techslides.com/demos/sample-videos/small.mp4"
source-3gp="http://techslides.com/demos/sample-videos/small.3gp"
>
</vvideo>
Props
Prop name | Description | Type | Required | Default value |
---|---|---|---|---|
source-webm |
Path to webm src | String |
no | |
source-ogg |
Path to ogg src | String |
no | |
source-mp4 |
Path to mp4 src | String |
no | |
source-3gp |
Path to 3gp src | String |
no | |
play-button |
Show play button | Boolean |
no | true |
mute-button |
Show mute button | Boolean |
no | true |
progress-bar |
Show progress bar | Boolean |
no | true |
full-screen-button |
Show fullscreen button | Boolean |
no | true |
wrapper-class |
Change default wrapper class | String |
no | vvideo_wrapper |
video-class |
Change default video class | String |
no | vvideo |
toolbar-class |
Change default progress bar class | String |
no | vvideo__toolbar |
button-class |
Change default button class | String |
no | vvideo__button |
progress-bar-class |
Change default progress bar class | String |
no | vvideo__progressbar |
Events
Event name | Description | Parameters |
---|---|---|
click |
fire when hello text is clicked | helloText: String |
Slots
Here you can customize vvideo buttons, it can be anything you want.
Slot name | Description | Accepted Element |
---|---|---|
playIcon |
Play button content slot | any |
pauseIcon |
Pause button content slot | any |
replayIcon |
Replay button content slot | any |
muteIcon |
Mute button content slot | any |
muteOffIcon |
Unmute button content slot | any |
fullScreenIcon |
Fullscreen button content slot | any |
Default styles
Default vvideo styles just for reference.
.vvideo_wrapper {
width: 500px;
height: 350px;
position: relative;
overflow: hidden;
border-radius: 15px;
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11),
0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.vvideo {
width: 100%;
height: 100%;
object-fit: cover;
position: relative;
z-index: 1;
}
.vvideo__toolbar {
display: flex;
justify-content: space-between;
padding: 0 1rem;
box-sizing: border-box;
width: 100%;
height: 50px;
margin-bottom: 6px;
position: absolute;
bottom: 0;
left: 0;
align-items: center;
}
.vvideo__button {
z-index: 2;
width: 50px;
height: 100%;
position: relative;
appearance: none;
border: 0;
background: none;
outline: 0;
transition: transform 200ms ease-in-out;
}
.vvideo__button:hover {
transform: scale(1.2);
}
.vvideo__progressbar {
flex: 1;
height: 10px;
position: relative;
background: #efefef;
z-index: 2;
border-radius: 5px;
margin: 0 1rem;
overflow: hidden;
}
.vvideo__progressbar > span {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 0;
background: #3498db;
transition: all 300ms linear;
}
Roadmap
- Add click to play option
Contributing
See CONTRIBUTING.md for development guide.
This component was generated with vue-authoring-template using vue-cli.