videocontext
Version:
A WebGL & HTML5 graph based video composition library
103 lines (85 loc) • 4.15 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>VideoContext</title>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../../dist/videocontext.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="container fill">
<div class="row fill">
<div class="col-md-8 fill" id="editor">
/*
About
-----
This a code based video editor powered by the VideoContext library.
The example code below should give a good overview of how this works.
Pressing CTRL+S will and play your edits in browser.
API
---
vc - VideoContext instance (https://github.com/bbc/VideoContext).
vc.video(url) - create a new video
vc.image(url) - create a new image
vc.effect(definitiion) - create an effect node.
vc.compositor(definition) - create a compositor node.
vc.transition(definition) - create a transition node.
vc.DEFINITIONS - an object containing effect definitions.
Effect Definitions
------------------
The folloring effects are available via the DEFINITION object. A definiton cam be used to create any type of processing node, but they can be loosely grouped as the following:
effects: AAF_VIDEO_SCALE, STATIC_EFFECT, COLORTHRESHOLD, MONOCHROME, HORIZONTAL_BLUR, VERTICAL_BLUR, AAF_VIDEO_CROP, AAF_VIDEO_POSITION, AAF_VIDEO_FLIP, AAF_VIDEO_FLOP
combiners:COMBINE,
transitions: CROSSFADE, DREAMFADE, HORIZONTAL_WIPE, VERTICAL_WIPE, RANDOM_DISSOLVE, STATIC_DISSOLVE, TO_COLOR_AND_BACK, STAR_WIPE
Shortcuts
---------
Ctrl+S = play & save
Caveats
-------
* Content thats dosen't have a local path needs to be served from a server with a liberal CORS policy. (imgur is good for images).
*/
//Set-up rendering environment
var canvas = document.getElementById("canvas");
window.vc = new VideoContext(canvas);
//Create nodes for processing graph.
var videoNode1 = vc.video("../../assets/introductions-rant.mp4", 0);
var videoNode2 = vc.video("../../assets/introductions-rant.mp4", 10);
var videoNode3 = vc.video("../../assets/introductions-rant.mp4", 20);
var monochromeEffect = vc.effect(VideoContext.DEFINITIONS.MONOCHROME);
var transitionNode = vc.transition(VideoContext.DEFINITIONS.STAR_WIPE);
var chromakeyNode = vc.effect(VideoContext.DEFINITIONS.COLORTHRESHOLD);
//Connect the graph graph together
videoNode1.connect(monochromeEffect);
monochromeEffect.connect(transitionNode);
videoNode2.connect(transitionNode);
transitionNode.connect(vc.destination);
videoNode3.connect(chromakeyNode);
chromakeyNode.connect(vc.destination);
//Setup the start/stop times for the video sources
videoNode1.start(0);
videoNode1.stop(5);
videoNode2.start(3);
videoNode2.stop(11);
videoNode3.start(0);
videoNode3.stop(11);
//Que up a transition
transitionNode.transition(3,5,0.0,1.0);
vc.play();
</div>
<div class="col-md-4" id="preview">
<canvas id="canvas"></canvas>
<canvas id="visualisation-canvas"></canvas>
<div id="playback-controls">
<button type="button" class="btn btn-default" id="play-button"><span class="glyphicon glyphicon-play" aria-hidden="true"></span></button>
<button type="button" class="btn btn-default" id="pause-button"><span class="glyphicon glyphicon-pause" aria-hidden="true"></span></button>
</div>
</div>
</div>
</div>
</body>
</html>