Display a preview for your video inputs easily

Usage no npm install needed!

<script type="module">
  import videoInputPreview from '';


Video Input Preview (Demo)

Display a preview for your video inputs easily


  • Installation

Simply import video-input-preview into your HTML.

<link rel="stylesheet" type="text/css" href="">
<script src=""></script>
  • Documentation

See the offical documentation for more in-depth informations.

  • How to use

You can either use data attributes or the VideoInputAttribute class to initialyze your inputs:

<input type="file" accept="video/*" data-video-preview="">
// OR
let preview = new VideoInputPreview(input, {
  preview: '',        // Optional | Preview displayed
  uploadIcon: '', // Optional | Icon used when no preview is displayed
  lang: 'en',                                         // Optional | Language used
  dictionary: null                                    // Optional | Allow for custom language
  • Methods

See the documentation for the method definitions.

  • Example

See this JSFiddle for a working example