https://github.com/aportela/wc-vue-video-slider

vue component for animating videos with a slider (can be used to simulate a 3d animation)
https://github.com/aportela/wc-vue-video-slider

3d animation slider video vite vue

Last synced: 11 days ago
JSON representation

vue component for animating videos with a slider (can be used to simulate a 3d animation)

• Host: GitHub
• URL: https://github.com/aportela/wc-vue-video-slider
• Owner: aportela
• License: agpl-3.0
• Created: 2024-02-21T10:38:48.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-03-08T11:18:15.000Z (9 months ago)
• Last Synced: 2024-03-08T12:29:33.963Z (9 months ago)
• Topics: 3d, animation, slider, video, vite, vue
• Language: Vue
• Homepage:
• Size: 2.1 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# wc-vue-video-slider

vue web component for animating videos with a slider (can be used to simulate a 3d animation)

## showcase

![blender-cube-diorama](https://github.com/aportela/wc-vue-video-slider/assets/705838/71d3814c-55e4-4ddf-ad77-9ad8a502f760)

![Node.js](https://github.com/aportela/wc-vue-video-slider/actions/workflows/node.js.yml/badge.svg)

## TLDR (Use on your own HTML)

Download / unzip last build release and update your HTML:

- Include main script file

```

```

- Include / customize main web component

```



    



```


## Development

### Install

```

$ git clone https://github.com/aportela/wc-vue-video-slider.git

$ cd wc-vue-video-slider.git

$ npm install

```

### Build

```

$ npm run build

```

## Props

**width**: Number

    Description: Video native (pixels) width

**height**: Number

    Description: Video native (pixels) height

**poster**: String (optional)

    Description: Image to be shown while the video is downloading

**streamSource**: String

    Description: Video path

**streamMimeType**: String

    Description: Video mime type

**streamFps**: Number

    Description: Video fps (frames per second)

**streamRangeFrom**: Number (optional)

    Description: Video custom start range (second)

**streamRangeTo**: Number (optional)

    Description: Video custom end range (second)

**hideSlider**: Boolean (optional)

    Description: Hide slider control (default = false)

**seekOnMouseMove**: Boolean (optional)

    Description: Allow control video seeking on mouse over event (default = true)

**showDebugData**: Boolean (optional)

    Description: Show extra debug data (default = false)

![Node.js CI](https://github.com/aportela/wc-vue-video-slider/actions/workflows/node.js.yml/badge.svg)