Examples: Simple Text

examples/simple_text

live demo

The "simple text" DataDocs example demonstrates exactly that: how to add some static text fields to your video in the webfont of your choice. The process is as follows (note that unless otherwise specified, whenever we say "open" we mean open the file in your favorite text editor - Aptana Studio 3 is free and cross-platform, Sublime Text is also great):

1. Open up dd_simple_text.html. Near the top of the file, you'll see some text that says "load our webfont" with a link on the line below. That link comes from the Google Webfonts directory, and tells our page to load, in this case, the font "PT Mono". Feel free to change this link to the webfont of your choice.

2. Scroll down the HTML code a bit until you find the <overlays> div. You'll notice that there are 3 other <div> tags inside, each with a distinct id. Inside these is the text that appears in the DataDoc. Feel free to change this text and/or the ids of the divs.

3. Open up css/dd_simple_text.css. You'll notice that there are 3 css tags, each of which corresponds to one of the divs in the original HTML file. Here you can change the color, position and font-size of your text; you can also change the font-family to match your new one if you've updated that link in the HTML file. >Note: make sure that the CSS class names match the id of your divs.

4. Open up main.js. In this file, you'll see three calls to the data_doc.addSalt each of which has a target field that matches one of the original divs. Adjust these fields to match you new div ids, if you've changed them. Next, adjust the start and end fields on each one to match when (in seconds) during the video you want your divs to appear and disappear.

5. Open dd_simple_text.html in your web browser, and see your customized DataDocs in action!

Tip: You can add as many text divs, css classes and addSalt calls as you need for your video. Just make sure all the ids are unique, and that each one has a corresponding css class and addSalt call with the id in the target field.

Need to add a lot of text? Check out the next example for a bulk method of adding text to your Data Doc.