An embeddable, framework-agnostic, browser-based video editor

npm install webgl-video-editor

<!-- after importing the library, the <video-editor> custom element will be defined -->
<video-editor id="trimmer" source="video.mp4"></video-editor>

<button id="export" type="buton">Get trimmed video</button>

<script>
import 'webgl-video-editor'

const editor = document.getElementById('editor')

async function restoreFromLocalStorage() {
  try {
    const savedJson = localStorage.getItem(movieContentKey)

    if (savedJson) {
      const parsed = JSON.parse(savedJson)
      return editor.replaceContent(parsed)
    }
  }
  catch (error) {
    console.error(error)
  }
}

restoreFromLocalStorage()

// save to localStorage when the content changes
editor.addEventListener('change', function (event) {
  localStorage.setItem(movieContentKey, JSON.stringify(event.detail))
})
<script>

Powered by:

• mp4Box.js
• mp4-muxer
• WebCodecs API
• LibAVJS-WebCodecs-Polyfill

Roadmap

• [ ] Bitrate/filesize controls
• [ ] Webm support
• [ ] Color profile settings

Funding

This project is funded through NGI Zero Core, a fund established by NLnet with financial support from the European Commission's Next Generation Internet program. Learn more at the NLnet project page.