Popcorn Editor is a forked version of the https://popcorn.webmaker.org website with the server backend ripped out that's made to be embedded in pretty much any website needed.
Video editors are normally large and normally very expensive client side applications with steep learning curves. Popcorn Editor seeks to take the video editor to the web by creating popcorn.js powered web videos.
Popcorn Editor can be installed through bower
$ bower install popcorn-editor
Creating a new Popcorn Editor instance is as easy as:
--
<body>
<div id="editor"></div>
</body>--
<script src="PopcornEditor.js"></script>--
// Initialize the editor with the div id and path to Popcorn Editor.
PopcornEditor.init('editor', '/path/to/PopcornEditor/editor.html');
// Create event handlers for when specific events happen in Popcorn Editor.
PopcornEditor.listen('save', function (message) {
console.log('New save data: ', message);
});editor id [string]: Popcorn Editor requires the name of an element to bind to.
URI to Popcorn Editor root [string] (optional): Since Popcorn Editor loads
in many HTML and CSS files outside of PopcornEditor.js, you may want to
specify the URI to the Popcorn Editor root.
event [string]: This is the name of the event. Possible strings are below.
handler [function]: This function is called when the event is triggered within the editor. It takes one parameter which is the data. The Schema for the data depends on the event:
save:
{
author: '', // Author name
background: '#FFFFFF', // Background color of project
data: {}, // Popcorn data object
description: '' // Metadata description
}Loads project data into the editor.
data [object]: The project data is the same schema as what is output from saving.
Given a javascript object which fits the schema defined below, popcorn editor will load that video into the editor.
{
"thumbnail": "",
"url": "",
"title": "",
"duration": 0,
"type": ""
}If you find any issues or have any questions, feel free to create a bug and I'll do my best to get back to you ASAP.
Building the project is currently pretty simple.
Make sure you have node v0.10.38 with an up to date gulp installed.
To build simply run
$ npm install
$ gulp
All successful Travis builds
trigger a push to S3 to a bucket called org.mozilla.air.popcorneditor. Thus every file in this repository is accessible via on S3 with the prefix https://s3.amazonaws.com/org.mozilla.air.popcorneditor/.
Additionally, an AWS CloudFront distribution caches this S3 bucket. Equally, every file in this repository is accessible via t CloudFont with the prefix https://d2edlhmcxlovf.cloudfront.net/.