Vuelity | VTVideo

Vuelity

This is eqiuvalent to ordinary Vue :style bindings but targets specific elements within the component.
:styles="{}"
:containerStyles="{}"
:buttonStyles="{}"
Styles for the time-track thumb.
:thumbStyles="{}"
Async src loading is supported.
videoSrc="./your/videoSrc.mp4"
This is for the aria-label attribute.
videoTitle="Your Video Title"
videoPoster="./your/videoPoster.jpg"
An array of timestamps with an associated title.
:timeTags="[{}]"
Enable/disable contextmenu on right click.
:contextmenu="true"
width="100%"
trackColor="#5bd0b9"
<VTVideo
:styles="{}"
:containerStyles="{}"
:buttonStyles="{}"
:thumbStyles="{}"
videoSrc="./your/videoSrc.mp4"
videoTitle="Your Video Title"
videoPoster="./your/videoPoster.jpg"
:timeTags="[{}]"
:contextmenu="true"
width="100%"
trackColor="#5bd0b9"
/>

Default

00:00
0
00:59

With Styles/Time-tags

00:00
0
A time tag!
A time tag!
A time tag!
A time tag!
A time tag!
00:59

Add time-tags

00:00
0
00:59
timeTags: [{ title: "" timestamp: "" }]

Async Source Loading

Try a full demo on Codepen!