Browse »

Friday, September 14, 2012

How to Embed Video Without ActiveX


Create HTML Code
1. Open Notepad.
2. Paste this code in a new HTML document:<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'><html xmlns='http://www.w3.org/1999/xhtml'><head><title>Add JavaScript code below this title</title></head><body><input id='videoButton' type='button' value='Play Video'/><div id='videoBlock' /></body></html>This creates a button and an empty 'div' block element. The block element's ID is 'videoBlock.' The button's ID is 'videoButton.' The 'videoBlock' element is a placeholder for the video. JavaScript code will place a video there when you click the button.
3. Add the following code below the document's '<title>' section:<script language='javascript' type='text/javascript'>var videoName = 'banner.swf';var videoHeight = '500';var videoWidth = '400';var testButton = 'videoButton';</script>This initializes the variables that determine the video player's height and width. The height and width in this example are 500 pixels and 400 pixels. You can set these values to anything you like. The code also sets the name of the video. Replace 'xyz.swf' with the name of any Flash video on your hard drive. If the video is on the Web, replace 'xyz.swf' with the video's URL.
4. Add this line of code below the code in the previous step:<script src='VideoCode.js' type='text/javascript'></script>This statement grabs an external JavaScript file named 'VideoCode.js' and makes it available in the current HTML page. That external JavaScript function contains the code that creates the video player.
5. Press 'Ctrl+S' to open the 'File Save' window, and type 'Video_Test.html' in the 'File Name' text box. Click 'Save' to save the document. Notepad will save it as an HTML file.
Create JavaScript Code
6. Click 'File' and select 'New.' Notepad will create a new document.
7. Paste the following JavaScript code into the document:function playVideo() {var videoObject = document.getElementById('videoBlock');videoObject.innerHTML = '<OBJECT classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'' +' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' WIDTH='' + videoWidth + ''' +'HEIGHT='' + videoHeight + ''' + 'id='myVideo'> ' +'<PARAM NAME=movie VALUE='' + videoName + ''' + '><PARAM NAME=quality VALUE=high><PARAM NAME=bgcolor VALUE=#FFFFFF>' +'<EMBED href='/support/flash/ts/documents/test1.swf' quality=high bgcolor=#FFFFFF WIDTH='550' HEIGHT='400' ' +'NAME='' + videoName + ''' +'ALIGN='' TYPE='application/x-shockwave-flash' PLUGINSPAGE='http://www.macromedia.com/go/getflashplayer'></EMBED></OBJECT> ';}// WINDOW UNLOAD FUNCTIONwindow.onload = function () {objButton = document.getElementById(testButton);if (objButton.addEventListener)objButton.addEventListener('click', function () { playVideo()} , false);elseobjButton.attachEvent('onclick', function () { playVideo()} );}The function named 'playVideo' creates an object tag that embeds a video into a Web page. This function uses the values for height, width and movie name set in the previous HTML document.The window.onload function sets up a button's click event. It uses the value for the button ID set in the previous HTML document. The click event causes a button click to run the playVideo function.
8. Click 'FIle' and select 'Save As' to open the 'Save As' window.
9. Type 'VideoCode.js' in the 'File Name' text box and click 'Save.' Notepad will save this as a JavaScript file. This is the file referenced in the previous HTML document.
10. Press 'Ctrl+E' to open Windows Explorer. Locate the HTML file that you saved.
11. Double-click the file. You will see the button that you placed on the page.
12. Click the button. The click event will fire, and the browser will execute the 'playVideo' function defined in the 'VideoCode.js' file. This causes the video to appear and begin playing.