Skip to content

Quick Start Guide

Jump to bottom
Matthew Shotton edited this page Oct 28, 2015 · 2 revisions

Introduction

The latest built version of the VideoCompositor lives in the /dist directory of the root of the project. Include this in your HTML to begin using the library.

To set up a video compositor you need a canvas element to render the final output to and to create a playlist for the content which you wish to play. Once that is done the content can be played/paused by calling methods on the video compositor instance and seeking can be done by setting the currentTime attribute of the video compositor instance.

Sample Code

<!DOCTYPE html>
<html>
<head></head>
<body>
    <script type="text/javascript" src="videocompositor.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var canvas = document.getElementById('player-canvas');
            var videoCompositor = new VideoCompositor(canvas);

            videoCompositor.playlist = {
                "tracks":[
                    [{type:"video", sourceStart:0, start:0, duration:5, src:"video1.mp4", id:"1"}]
                ]
            };

            videoCompositor.play();
        };
    </script>
    <canvas id="player-canvas"></canvas>
</body>
</html>

Clone this wiki locally