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.