DHTML + VX30 = Fun

Intro: Because VX30 video uses the standard HTML tag APPLET you can dynamically create, modify and destroy it with JavaScript. In this example we will show you how to dynamically create a VX30 video with a few JavaScript commands.

Requirements:
1. Zentu Encoder (available here)
2. Zentu JavaScript file (available here)
3. Basic HTML and JavaScript knowledge.
4. Complete sources for example available here

1. Create a VX30 Video Folder To begin, create a simple Java video with your Zentu Encoding program. After the encoding is complete open up the output folder with Windows Explorer. Please copy the ztmPlayer.js file, that you just downloaded, into this folder. Next open up the default HTML file with your favorite HTML editor.

2. Include JavaScript file ztmPlayer.js In the HTML file add the JavaScript import statement somewhere imbetween the HEAD HTML tags.

3. Create JavaScript Play Video Function.
Later on in the example we will create a DIV element whose ID attribute will be set to videoContainer. For now create a reference to this object by using the document.getElementById method and then set the object's innerHTML attribute to the function setHTML().

4. setHTML() and the ztmPlayer constructor. If you examine the contents of setHTML() you will find that we are creating an object with the constructor ztmPlayer(). The constructor is defined in the include file ztmPlayer.js. You will need to pass several parameters to the constructor including the appletID, the container ID, the height, the width, the meta URL, the video title, the codebase value and any additional applet parameters you wish to change from the default settings of the ztmPlayer class. The applet ID is an arbitrary decision as is the container ID and the video title. However, the height, the width and the meta URL should be taken from the applet code that the Zentu encoder created in your default HTML file. The codebase value should be set to wherever you chose to store your video files. Since we are working in an environment where all the files are contained within the same folder we can just put a reference to the current directory './'. The last parameter should be an array of applet parameters and their values that you wish to change from the defaults provided by the ztmPlayer class. In this case we have chosen to make sure that the parameter urlBase is set to documentbase and we have defined a call back for when the video is stopped called 'cleanUp();'. Now that we have constructed the applet we can now use the utility function createAppletHTML from the ztmPlayer class to return the HTML code for the videoContainer DIV.

5. Setting a Callback When the video finishes playing it would be nice if the player just went away. This is easily accomplished by first setting a callback for when the video is stopped and second by defining the callback with a JavaScript function. In step 4 we defined the callback with the Zentu Video Applet parameter JsCallbackOnStop. Next we define the function cleanUp() by first getting a reference to the DOM element videoContainer and then setting the element's innerHTML attribute to a blank string. This in effect will remove the applet from the web page.

6. Set up HTML code Now that we've created our JavaScript function it is now time to put them into our web page. First start by removing all the APPLET code that our Zentu encoder program created. Next create a hyperlink whose onClick attribute is set to javascript:playVideo(); return false;. Next create a DIV element and set it's id attribute to videoContainer.

7. Test your handy work. After you open up your HTML file with your web browser click the link you created in step 6. If you followed the instructions correctly your video should appear, play and then disappear when it is completed play. If you are having troubles please download the example source code form the link above.