<img> linking to Flash player

[europe451]

So I created a flash play list using xml, and it works for the most part besides the embedding problem. Anyway, I am wondering if there is a way to have an image (or any link) on the HTML page communicate with the flash video player to have that video play.

IE.



<img src="images/demo1.jpg"/>
<div class="example">
text1: text1 <br>
text2: text2
</div>


when that image is clicked on I want the flash video player to play demo1.flv.

or when



<img src="images/demo2.jpg"/>
<div class="example">
text1: text1 <br>
text2: text2
</div>


is clicked the flash video player would need to play demo2.flv

I also don't want to reload the page every time a new video is selected to play.

Thanks for any help.

[BLiZZaRD]

Have you tried my solution for the embedding problem?

As for linking with a button or an image, it can be done. Not the prettiest of methods but do able.

Have a look at the response to this thread (http://www.sitepoint.com/forums/showthread.php?t=569602) for a quick and dirty explanation while I look for a more substantial method. This one should get you the idea though.

[europe451]

I quickly went through and changed to complete links but I don't think it worked. I need to look at it closer, but don't really have time till later tonight. Thanks for the help

[europe451]

So I checked out that site and I think it was helpful, or it just made things worse.

What I have so far:


<div id="portfolio_flashcontent"><span class="align-center">
<embed
src="flash/demo.swf"
width="490"
height="330"
allowscriptaccess="always"
allowfullscreen="true"
/>
</span>
</div>

<div class="portfolio_spacer">
<div class="portfolioimagesLeft">
<div class="gallery">
<a href="#" onclick="setVideo('demo');"><img src="images/portfolio/motiongraphics/thumb_demo.jpg" /></a><br />
</div>
<div class="portfoliotext">
<b>Business:</b> Demo<br />
<b>Description:</b> Sample of motion graphics that can be used in a variety of different ways.<br />
</div>
</div>
</div>



<script>
function setVideo(name) {
var names = {
'demo' : {
'swf' : 'http://www.mysite.com/flash/demo.swf'
}

};
setFlash(names[name].swf);
document.getElementById('portfolio_flashcontent').innerHTML = names[name];
}
</script>
The image appears to be showing up, but I can't get the video to play

[europe451]

I was looking into this a little bit more and came across this:

ExternalInterface

From what I was reading it seems like that is probably want I to use, but I'm having a problem using this function.