@ajmariduena/vvideo

A simple Vue.js Video component

Usage no npm install needed!

<script type="module">
  import ajmariduenaVvideo from 'https://cdn.skypack.dev/@ajmariduena/vvideo';
</script>

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.