Zenterac

Getting Started!

1- Creating a project (project.html)

Download the latest distribution on Github. You will only need what is inside the "dist" folder to get started.
To make it easier, start with one of the demos. "Blank" is a good start if you want to create a new project from scratch.
The .html file is your project. You can run it from your computer or host it somewhere on your web server.

2- Adding the project to a page

Now add this to the web page where you want to display your project
Change the iframe path to match the location of your .html project
You may change the style of the video-container, but do not change the style of the other div or iframe.
<div id='zen-video-container' style='margin:auto; min-width:300px; max-width:854px;' >
    <div style='position:relative;padding-bottom:56.25%;padding-top:30px;height:0;background:#111;overflow:hidden;'>
        <iframe id='zen-video-iframe' src='/path/to/project.html'
            onload='if(this.src.indexOf(window.location.hash) < 0){this.src += window.location.hash;}'
            style='position:absolute; top:0; left:0; width:100%; height:100%;'
            frameborder='0' scrolling='no' allowfullscreen >
        </iframe>
    </div>
</div>

3- Video upload

Upload your video anywhere using the .mp4 H264 format. Then, in the javascript of your project enter the URL of the video segment when defining it. 
var bunny = new Video("bunny", {url: "http://yoururl.com/media/bunny.mp4"});

4- Customize your project

Visit our demos and doc to learn our API

Need help?

Need help to create a project? Visit our Github
We may be able to answer your questions

© 2018 Zenterac