videocontext
Version:
A WebGL & HTML5 graph based video composition library
80 lines (70 loc) • 2.63 kB
HTML
<html>
<head>
<title>VideoContext - Transition Example</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="../dist/videocontext.js"></script>
<script type="text/javascript" src="../js/utils.js"></script>
<style type="text/css">
.credits,a {
color: #bbb;
text-align: center;
font-size: 0.75em;
}
</style>
</head>
<body>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById("canvas");
var videoContext = new VideoContext(canvas);
var videoNode1 = videoContext.video("../assets/introductions-rant.mp4", 0, 4, {volume:0.2, loop:true});
videoNode1.startAt(0);
videoNode1.stopAt(8);
var videoNode2 = videoContext.video("../assets/introductions-rant.mp4", 30, 4, {volume:0.2, loop:true});
videoNode2.startAt(3);
videoNode2.stopAt(11);
var crossFade = videoContext.transition(VideoContext.DEFINITIONS.CROSSFADE);
videoNode1.connect(crossFade);
videoNode2.connect(crossFade);
crossFade.connect(videoContext.destination);
crossFade.transition(3,8,0.0,1.0);
//Wire in button controls
var playButton = document.getElementById("play-button");
var pauseButton = document.getElementById("pause-button");
playButton.onclick = videoContext.play.bind(videoContext);
pauseButton.onclick = videoContext.pause.bind(videoContext);
//Set-up the visualisation using the convienience function in ../js/utils.js
InitVisualisations(videoContext, "graph-canvas", "visualisation-canvas");
}
</script>
<div class="pure-g">
<div class="pure-u-1-3"></div>
<div class="pure-u-1-3">
<h1>VideoContext</h1>
<h2>Transition Example </h2>
<p>
<canvas id="canvas" width="480", height="270"></canvas>
</p>
<p>
<button class="pure-button" id="play-button">Play</button><button class="pure-button" id="pause-button">Pause</button>
<canvas id="visualisation-canvas" width="480", height="20"></canvas>
</p>
<p>
<h3>Graph</h3>
<canvas id="graph-canvas" width="480", height="200"></canvas>
</p>
<div class="credits">
<p>
Clip taken from <a href="https://vimeo.com/125095515">#Introductions</a>
</p>
<p>
By LaBeouf, Rönkkö & Turner in collaboration with Central Saint Martins BA Fine Art 2015 students. Joshua Parker's section.
</p>
</div>
</div>
<div class="pure-u-1-3"></div>
</div>
</body>
</html>