Get unlimited public & private packages + team-based management with npm Teams.Learn more »

vue-video-input

1.0.1 • Public • Published

vue-video-input

Video file input Vue.js component with video canvas preview, drag and drop, information detection, gif preview creation and more.

Installation

npm

npm install --save vue-video-input

yarn

yarn add vue-video-input

Usage

<template>
  <div class="hello">    
    <video-input 
      ancho="600" 
      alto="600" 
      radio="0"
      mensaje="DRAG VIDEO" 
      @info="onInfo">
    </video-input>
  </div>
</template>
<script>
import VideoInput from 'vue-video-input'
 
export default {
  name: 'app',
  data () {
    return {
    }
  },
  components: {
    VideoInput
  },
  methods: {
    onInfo (video) {
      console.log('New video selected!')
      if (video.base64) {
        console.log('Base64 of video loaded.', video.base64)
      } else {
        console.log('FileReader API not supported: use the <form>, Luke!')
      }
    }
  }
}
</script>

You can also use it directly in the browser through unpkg's CDN (or jsDelivr):

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue"></script> 
  <script src="https://unpkg.com/vue-video-input"></script> 
  <title>In the browser!</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <video-input></video-input>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      components: {
        'video-input': VideoInput
      }
    })
  </script> 
</body>
</html>

Props

  • ancho, alto: (pixels, optional) the maximum width and height of the preview container. The video will be resized and centered to cover this area. Either ancho or alto is required.
  • margin: (pixels, optional) the margin around the preview container. Default value: 0.
  • radio: (percentage, optional) The border-radius value for the container. Set radius="50" to get a circular container. Default value: 0.
  • mensaje: (string, optional) Message to display inside container when no video has being selected.
  • tipo: (media type, optional) the accepted video type(s), e.g. video/mp4, video/avi, etc. Default value: 'video/*'.
  • maxmb: (MB, optional) the maximum accepted file size in megabytes.
  • duracion: (int, optional) the amount of seconds the video must have. Default -1=disabled.
  • ratio: (string, optional) the required aspect ratio the video must have.
  • preview_ancho: (pixels, optional) the width for the gif preview file to be created.
  • preview_alto: (pixels, optional) the height for the gif preview file to be created.

Events

  • info: emitted on (successful) video change. Passes an object with the fields: mbytes (amount of megabytes that the video has), duracion (amount of seconds the video has), ratio (aspect ratio of the video), ancho (original width of video), height (original height of video), base64 (Base64 Data URI string with video data).
  • change: emitted on (successful) video change. Passes a field called 'archivo' with the input object file.
  • preview: emitted while the animated gif datafile is being and/or has finished created, along with an object with creando (true is gif preview is still being created), preview (Base64 Data URI string with GIF data).
  • error: emitted on error, along with an object with tipo (maxmb, ratio, formato), mensaje.

TODOs

  • Translate properties/events to English
  • Add tests

Contributions

All contributions are welcome, as long as they are within the scope of the project. Please open a new issue before submitting a pull request.

You should follow the Javascript Standard Style guidelines: https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style

Keywords

none

Install

npm i vue-video-input

DownloadsWeekly Downloads

4

Version

1.0.1

License

MIT

Unpacked Size

112 kB

Total Files

9

Last publish

Collaborators

  • avatar