A dynamic media input form developed for oTranscribe
JavaScript HTML
Latest commit d391de6 May 25, 2015 @ejb ejb Versioning

Readme.md

oTinput

A dynamic file input form developed for oTranscribe. Creates simple, user-friendly form for selecting local audio/video files, which can then be played audio or video in-browser. Combine with oTplayer for an awesome combo.

Install

Download otinput.js or otinput.min.js and include it in your page along with jQuery.

Usage

Initialise a new instance of oTinput like so:

var input = new oTinput({
  element: '.my-input-holder',
  onFileChange: function(file){
    console.log('File name is: '+file.name);
  },
  onURLSubmit: function(url){
    console.log('URL is: '+url);
  }
});

onFileChange and onURLSubmit are run whenever a valid file or URL is submitted by the user.

Note that oTinput does not include any styles.

Config options

All of these are optional apart from element.

  • element: Selector, or element, to contain input buttons.
  • onFileChange(file) - callback for when file changes. Callback argument is File object.
  • onFileError(error, file): Callback for when file is unsupported or otherwise invalid. Callback arguments are Error object and File object.
  • onDragover(): Callback function for when a file is dragged over the input and can be dropped.
  • onDragleave(): Callback function for when a file is dragged away from the input.
  • onURLSubmit(url): Callback function for when valid URL is submitted. Callback argument is the submitted URL
  • onURLError(error, url): Callback function for when URL's filetype is unsupported or otherwise invalid. Callback arguments are Error object and the submitted URL.
  • text: Object used to specify custom replacements to default text.
    • button: Default is "Choose audio (or video) file".
    • altButton: Default is "Enter file URL".
    • altInputText: Default is "Enter URL of audio or video file, or YouTube video:"
    • closeAlt: Default is "close"

Methods

  • showURLInput(): Switch to secondary input for URLs.
  • showFileInput(): Return to primary input for files.
  • getSupportedFormats(): Returns an object with properties 'audio' and 'video', each containing arrays of supported filetypes. Can also be used without initialising object.

    var formats = oTplayer.getSupportedFormats();
    formats;       // { audio: ["mp3", "wav"], video: ["mp4"] }
    formats.audio; // ["mp3", "wav"]
    formats.video; // ["mp4"]
    
  • isFormatSupported(filetype): Returns true if file format is supported by current browser. Can also be used without initialising object:

    oTplayer.isFormatSupported('mp3');
    

Browser support

oTinput requires the File API, so only supports modern browsers.

Building dist folder

Running tests

  • Build dist folder
  • Run grunt test

Version history

v1.0.0

May 25, 2015

  • Initial release