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 to our video production course and learn the entire gamut of web video production.
- 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> This article of August 7th, 2009 is authored by Partha Bhattacharya, who runs this website. Catering to the clients' video needs aside, Partha also writes guest articles for other web publications. |
