Loading videos inside a div

[jamiecottonuk]

Hi all,

I have found some code that uses javascript to change the image in a div without reloading the page

I have made a quick test page here http://www.mikecotton.com/test/

HTML Code

<div id="previewPane">
	<img src="sub1_large.jpg"/>
</div>
<div id="theImages">
	<a href="" onclick="showPreview('sub1_large.jpg');return false"><img src="sub1_thumbnail.jpg"/></a>	
	<a href="" onclick="showPreview('sub2_large.jpg');return false"><img src="sub2_thumbnail.jpg"/></a>			
	<a href="" onclick="showPreview('sub3_large.jpg');return false"><img src="sub3_thumbnail.jpg"/></a>	
</div>

Javascript code

function showPreview(imagePath)
{
	var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
	if(subImages.length==0){
		document.getElementById('previewPane').appendChild(img);
	}
	else img = subImages[0];
	img.src = imagePath;
}

My question is how would I do the same thing if I wanted it to work with videos instead of images.
For example the user clicks a thumbnail and the video would be displayed in the preview pane instead of another image?

 

[BillyRayPreachersSon]

It really depends on the technology you are using to display videos. If you're using Flash, I'd go for the Flash integration kit (which gives you a proxy to talk between JS & Flash).

If you're using standard embed / object elements (so WMP, Quicktime, etc), you should be able to target them using their ID (as you have with images), and set the relevant param (usually "src", from memory).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]