I'm having a bit of trouble embedding some .mov files into APDivs I've placed on the layout of a video page within a larger site. Basically, there are four links in an image map at the top of the page, each linked to a different .mov file which should then appear in an allotted space below and begin to play within the same page. When you select another link at the top, the previous video should disappear and the new video should appear and begin to play.
I did the same set up with a photography page - links at the top which then trigger images to appear below in APDivs using the 'show-hide' behavior - and it worked swimmingly. For whatever reason, when I preview this video page in Safari (Firefox works just fine), there are black boxes representing where my three videos are placed on the page stacked on top of one another (the APDivs are stacked so the videos play in the same coordinates on the screen every time, like a little video viewing region on the page). I have to click the links at the top a few times and eventually the appropriate video will appear with the controller at the bottom, and then the videos work just fine. I'm wondering why these black boxes (essentially my videos without their controller at the bottom) appear when you initially navigate to the page, and why selecting the links at the top multiple times solves the issue. I have the links set to use the 'show - hide' behavior in cooperation with the videos embedded inside of the APDivs so they should appear and disappear as the user selects the links at the top of the page
It's a pain in the ***; it's something I've been troubleshooting for the past couple of hours and I can't seem to place my finger on what the issue is.
Firefox works really well with the same setup, except that when you select another video while the previous video is still playing, the visual element of the previous video disappears as it should, but the audio continues to play out. It's not a huge issue - it's something I could live with - but if anyone knows if there is some parameter I could set that would cut the video off once a new link has been selected, that would be wonderful. Safari does not have this issue for whatever reason.
Any help would be appreciated. Thanks.
I don't see a link anywhere to your site,
How To get Help Quickly
so I'm going to toss some helter-skelter ideas at you.
Instead of Show/hide Layers, why don't you convert MOV to FLV (the gold standard on video sharing sites)?
Then insert Media > Flash Video into a Modal Window such as FloatBox?
Or to get it done fast, upload your MOV to YouTube.com then copy & paste their <embed> code into your web page (in code view, of course).
I appreciate your thoughts on the issue. A floatbox wouldn't work since I have a layout that doesn't lend itself to one; it's tailored to the way I've already set it up. As far as youtube goes, some of the content is commercial material that I can't legally post on there.
I haven't linked to the site because it isn't uploaded to the web as of right now. Thanks anyway for the help.