https://github.com/wgryc/video-input-js

video-input field to make video recording easy via client-side JS
https://github.com/wgryc/video-input-js

Last synced: 3 months ago
JSON representation

video-input field to make video recording easy via client-side JS

• Host: GitHub
• URL: https://github.com/wgryc/video-input-js
• Owner: wgryc
• License: mit
• Created: 2020-11-18T17:22:47.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-11-19T17:04:37.000Z (about 4 years ago)
• Last Synced: 2024-08-01T15:15:00.113Z (6 months ago)
• Language: JavaScript
• Size: 85.9 KB
• Stars: 170
• Watchers: 5
• Forks: 10
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-client-side - videoinput.js - video-input field to make video recording easy via client-side JS - [Try it!](https://phaseai.com/resources/video-input-form-js-demo) (Multimedia / Video)

README

        
# videoinput.js: client-side video input field with POST submissions

Video inputs can be a pain. This JS file creates a new HTML element that enables you to record video inputs and POST them directly to a URL. It is meant to act as a simple form-like interface for recording and submitting videos.

Currently this works on Firefox and Chrome. It does not require jQuery.

[See a demo here.](https://phaseai.com/resources/video-input-form-js-demo)

## Sample Code

This is meant to be as simple as possible. Below is a sample video input:

```

```

This will create a video input field 640px wide and 480px high, with the label "Please record your answer" above the video input. The field will enable you record for 3 seconds, and clicking "submit" will send the video to /r/upload.

## Supported Attributes

*Required* fields are below:

* id: the id of the element. Also used to name files and reference buttons within the field.

* label: the instructions above or below the video input field.

* action: the URL where the post request will be sent.

*Optional* fields are below:

* vidwidth: video width in pixels

* vidheight: video height in pixels

* labelloc: the location of the label field. Use "top" or "bottom" to position the label.

* maxtime: the maximum length of the recording in seconds.

## About

This project is written by Wojciech Gryc at [Phase AI](https://phaseai.com/). We're a team dedicated to making it easier to find technical roles and communicate your ability to succeed in those roles. If you have questions, please reach out at hello  phaseai  com.