<img> linking to Flash player

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.

HTML Code:

---

<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

HTML Code:

---

<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.

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 for a quick and dirty explanation while I look for a more substantial method. This one should get you the idea though.

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

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

What I have so far:

HTML Code:

---

<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>

---

Code:

---

<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

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.