Video Input Preview (Demo)

Display a preview for your video inputs easily

Doc

• Installation

Simply import video-input-preview into your HTML.

<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/VideoInputPreview.min.css">
<script src="https://unpkg.com/[email protected]/VideoInputPreview.min.js"></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="https://link.to.your.preview.mp4">
// OR
let preview = new VideoInputPreview(input, {
  preview: 'https://link.to.your/preview.mp4',        // Optional | Preview displayed
  uploadIcon: 'https://link.to.your.upload/icon.png', // 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

Authors

• Zenoo - Initial work - Zenoo.fr