How Can I Place Two Videos Onto a Single Web-page?

January 21, 2009 | By admin |

By Daisy Lindahl

Introduction

Step 1: Download and install Video to Flash Converter

Step 2: Convert both videos to Flash format

Step 3: View conversion results

Step 4: Open HTML page

Step 5: Add second player to the HTML page

Step 6: Change player positions and add text to the HTML page

Introduction

Video to Flash Converter allows you to create Flash video and a sample HTML page with the built-in player to help you playback the converted video on your blog or web-page. That’s great, but… What if you need more than one video on one and the same page? No problem. A few simple steps and you’ll get what you need. Just follow the instructions below to learn how to place two videos on a single page.

Step 1: Download and install Video to Flash Converter
Click to download it. After the download is finished, run the VideotoFlash.exe file and follow the installation wizard instructions.

Step 2: Convert both videos to Flash format
After you install Video to Flash Converter, run it, load one of the videos you would like to place on your web-page into the program and convert it to .flv format. Follow the instructions given in the How can I convert video for a web page? guide to do this.

Note: when configuring conversion parameters, check the Create SWF player and HTML page for web sharing option. In this case the program will create a folder with the converted FLV file, as well a player and an HTML page with the built-in player. The name of the folder coincides with the input file name. If you do not check this option, no folder will be created, the program will generate only the output video.

When the conversion is over, the following window will be automatically opened:
Press the Continue button to convert the second video.

Step 3: View conversion results
During the conversion Video to Flash Converter creates a separate folder for each converted video with all the necessary contents including the Flash video file itself, the information about the player used for its playback, an HTML page with the built-in player etc. See How can I place a video onto my web-page? Step 3 to find detailed description of the files this folder contains and their functions.

Since we converted two videos, two separate folders will be created on your computer.

Step 4: Open HTML page
Open any of the two created folders, next find and open the index.htm page using a web editor.

Note: if your web editor has two modes - ‘Design’ mode and ‘Source’ editing mode (or something like that), you need to choose the source editing mode to be able to see and change the page markup.

The contents between the tags displays player ID. Any word can be used to define the ID parameter. The only requirement is that it should be unique for each particular player on a page and coincide with the so.write parameter of the player.

The contents between the tags displays all player parameters. The so.addVariable “file” line contains the link to the created Flash video. The so.addVariable “theme” line is the name of the player skin.

Step 5: Add second player to the HTML page
To add a new player to your page:

Open the other folder, then find and open the index.htm page in a web editor.

Copy the contents between the opening and the closing tags from the index.htm page you have just opened to clipboard.

Paste the copied material to the other index.htm page below the closing tag.

Change the ID parameter of the second player (the one located below). Use any word you like to definde the ID. Delete the word that appears in inverted commas and type in your own. For example, change it to flashcontent1.

Change the so.write parameter of the second player accordingly. Use the same word you typed in the ID field.
Copy the second video to the folder with the modified index.htm page. Make sure that both the converted video files with .flv extension, as well as the modified index.htm page are located in one and the same folder now.

Step 6: Change player positions and add text to the HTML page
Well, the page with the desired videos is created, but it looks somewhat dull - no text that would accompany your video. To make the page you created more personal use the tips below: