Skip to content
An extendable video-editing framework for the browser
JavaScript HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows 🔧 Add nodejs workflow Nov 20, 2019
dist 🐛 Fix media layers not attaching correctly Dec 27, 2019
docs 💡 Edit jsdoc comments Oct 13, 2019
examples Change webcam example to use chromakey effect Dec 6, 2019
screenshots 🚚 Rename project to 'vidar.js' Aug 17, 2019
scripts Unit test Pixelate Dec 24, 2019
spec ♻️ Expose vidar element fields Dec 26, 2019
src
.gitignore 🍱 Add sample media for examples Oct 5, 2019
CHANGELOG.md 🔖 Release v0.6 Dec 27, 2019
CODE_OF_CONDUCT.md 📝 Update code of conduct Dec 19, 2019
CONTRIBUTING.md 📝 Update dependencies in contributing guide Jan 2, 2020
LICENSE 📄 Create LICENSE Nov 2, 2018
README.md 📝 Update installation method Dec 27, 2019
eslint.conf.js 🚨 Lint js config files Nov 20, 2019
eslint.test-conf.js 🔧 Remove mocha in eslint config Nov 20, 2019
jsdoc.conf.json Add jsdoc-export-default-interop Oct 12, 2019
karma.conf.js 🚨 Lint js config files Nov 20, 2019
package-lock.json 🔖 Release v0.6 Dec 27, 2019
package.json 🔖 Release v0.6 Dec 27, 2019
rollup.config.js 🚨 Lint js config files Nov 20, 2019

README.md

Vidar

Build Status

A video editor for developers

Screenshot

Vidar is a completely in-browser video-editing library. Similar to conventional video-editing software, it lets you layer media and other content on a timeline. Audio, image, video and other tracks are supported, along with powerful video and audio manipulation to existing tracks. Being very flexible and extendable, you can choose to only use the core components or define your own.

Features

  • Export video to blob
  • Write your own layers and effects
  • Write a function for a property
  • Keyframes
  • Built-in hardware accelerated visual effects
  • More coming soon

Usage

<script src="https://unpkg.com/vidar@latest/dist/vidar.js"></script>

Then, to create a movie (which is a project)

const movie = new vd.Movie(canvas);

Then, add layers

movie
  // add an empty blue layer starting at 0s and lasting 3s and filling the entire screen
  .addLayer(new vd.layer.Base(0, 3, {background: 'blue'}))
  // add a cropped video layer starting at 2.5s
  .addLayer(new vd.layer.Video(2.5, video, {mediaX: 10, mediaY: -25}));

To start the movie, just like any ol' <video> or <audio>, use .play()

movie.play();

License

Distributed under GNU General Public License v3. See LICENSE for more information.

Further Reading

Contributing

See the contributing guide

You can’t perform that action at this time.