0

Here's what I am looking to do:

  1. A person goes to my site and a Quicktime movie plays.

  2. At the end of the movie, a new image appears (ideally fades in).

I guess that there are three ways this can happen:

a. The Quicktime image window is replaced by an image. b. The Quicktime image window moves to the background/behind an existing image on the page (or that background image comes forward on top of the Quicktime image window). c. After the completion of the Quicktime movie, the site automatically redirects to a new page.

I have all the components for the page, but I have not been able to locate any code out there than can make this happen.

Thanks in advance for any help :)

Mindful
  • 23
  • 2
  • 6

1 Answers1

0

You don't have access to the plugin that's playing the MOV. You'd have to use native HTML 5 video.

In any case: If it's always the same video - and thus the same length - you could try running a Javascript timer in the background. When the time's up, you do one of the things you mentioned.

HTML 5 video brings along some new media events that you can use. In your case the ended event seems appropriate. You'd just bind that to the video element like any other event. From then on it's simple DOM scripting, like:

function myHandler(e) {
    if(!e) { e = window.event; }
    top.location.href = "http://brigadapictures.com";
}
document.getElementById('video').addEventListener('ended',myHandler,false);
DanMan
  • 11,323
  • 4
  • 40
  • 61
  • Thanks for the post. I converted the video to an m4v file and recoded it into html5. The difficulty with using a timer is that different connections will load at different speeds--and eventually I want to have several videos that load as a series. So I need some type of end of event code to make Step #2 occur (as outlined above). Ideally, I would like code for either option "a" or "b" above. Any suggestions? – Mindful Feb 11 '11 at 04:17
  • @Mindful I've expanded my answer. – DanMan Feb 12 '11 at 16:51
  • @DanMan Thanks for the follow up. I implemented the changes. An idea why the redirect (see code below) doesn't work? – Mindful Feb 14 '11 at 21:29
  • In general you should check the error console (ctrl+shift+j in Firefox). I've added an example. It's the same as yours, except for the weird quotes. Works for me in Firefox. – DanMan Feb 14 '11 at 21:48
  • @DanMan. Thanks. I changed all the quotes and the code now works :) Next, I've put this code into a snippet. When the code redirects, it places the new page in the frame instead of reloading the entire page. Any thoughts? Lastly, do you know if it is possible to have the video load only once instead of reloading each time I click back to the homepage--I know that this may be asking a lot. Many thanks. – Mindful Feb 15 '11 at 21:52
  • @Mindful - Instead of `location.href` use `top.location.href`. See here: http://stackoverflow.com/questions/580669/how-to-redirect-parent-window-from-an-i-frame-using-javascript. I think I've earned my reputation now, what do you think? ;) – DanMan Feb 15 '11 at 23:05
  • @DanMan. Many thanks. I clicked that I accepted your answer. Is there anything else I need to do? I'm a new user. – Mindful Feb 16 '11 at 01:06