How To Display 4 Separate Videos In A Single Video

« How To Create Zoom-In On Mouseover With jQuery Plugin | Embedding SWF, FLV, & MP4 Videos In A Webpage »

On several occasions the need may arise when you have to simultaneously show several clippings of web videos at the same time.

In flash animation it may be possible to show video clippings simultaneously located at different positions on the video canvas.
But if you do not have the right tool to create such flash animation, you can still do it in a relatively easier way.

In this video tutorial you can see how 4 different portions of a single web video on YouTube are merged and shown in a single video.

Let us look at the steps involved:

The four equally-sized portions – you may do different sizes also – are recorded from the computer screen with Camtasia, an ideal screencast tool.

Each recorded portion is now separately edited as required, and then converted to preferably in SWF flash format. Shorter duration is good for SWF, otherwise the file size will get bloated. All these works can be done in Camtasia Studio. You may, if you want, enroll into our course on making training video and learn how to make instructional and educational videos.

Now it’s the turn to embed the 4 SWF flash files in a webpage. You will need the easily available ‘swfobject.js’ javascript file in the head section. The 4 SWF files are embedded in 4 cells of a table with the following html code (the full html code is given below should you need):
```
<object width="240" height="180">
<param name="movie" value="somevideo.swf">
<embed src="somevideo.swf" width="240" height="180">
</embed>
</object>
```
If this serves your need you may not proceed further. If however you want the 4 clippings appearing in the same video together, there is a step more to go.

Screencast again, this time do that of the 4 videos together in the webpage. Edit the recording and if necessary convert it into a flash format.

The 4-in-1 web video is now ready for any alteration like for example transitions in the beginning and the end as shown in the video.

HTML Code For Embedding 4 Videos

<html><head>

<title>How To Show 4 Videos In One</title>

<script type="text/javascript" src="swfobject.js"></script>

</head>

<body>

<center>
<table cellspacing=1 cellpadding=1 border=1>

<tr>

<td>
<object width="240" height="180">
<param name="movie" value="TL.swf">
<embed src="TL.swf" width="240" height="180">
</embed>
</object>
</td>

<td>
<object width="240" height="180">
<param name="movie" value="TR.swf">
<embed src="TR.swf" width="240" height="180">
</embed>
</object>
</td>

</tr><tr>

<td>
<object width="240" height="180">
<param name="movie" value="BL.swf">
<embed src="BL.swf" width="240" height="180">
</embed>
</object>
</td>

<td>
<object width="240" height="180">
<param name="movie" value="BR.swf">
<embed src="BR.swf" width="240" height="180">
</embed>
</object>
</td>

</tr></table>
</center>

</body>
</html>

Get the latest top web marketing tips! 'Like 2WebVideo' now on Facebook below!

This article of August 7th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.