@ajmariduena/vvideo NPM

vvideo

A simple Vue.js Video component

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.

@infinitebrahmanuniverse/nolb-_aj @everything-registry/sub-chunk-37 @zalastax/nolb-_aj

0.1.1

6 years ago

0.1.0

6 years ago