How is this done?

I put this in the JavaScript category because I think it fits. However, I want to understand what technology I am looking at, which is at Apple.com. Right now they have an animation of a robot jumping down from the top of there home page. Could someone explain how this is done? What part of JavaScript can do this? Thanks for any help.

A simple inspection of the site’s HTML might shine some light on the matter…
image

You heard hooves and thought zebras. It’s a video file playing behind the text in a HTML5 video element.

2 Likes

A super helpful start… so is this some type of slick implementation of a video over HTML5? It seems very different than just he typical way video plays in the background of some websites. I have seen this (the one I am asking about) done by Apple, IMDB, Microsoft and people who have top notch web development. I just want some direction on how it is done. So it is video… hmm! If anybody has a tutorial or other resource please shoot it. Thanks

Yes its a video.

Copy all the below into your address bar to see.

blob:https://www.apple.com/6bfabe2f-0a29-41f5-acc8-f7c3a25c6367

EDIT: Scratch that it seems you can’t link to it but I did have the video playing on its own for a few minute.

That’s coming up as a 404 ‘Page Not Found’ currently. Is there a stray character in there somewhere?

2 Likes

Yes weird it stopped working. It was working but I wonder if you can’t link directly to it.

I don’t think that would surprise me - maybe they have some other context parameters buried in there somewhere.

2 Likes

Yes, I originally did just that after @m_hutley showed me. It never played for me either. However, I understand what you mean because I have found the buried video link many on sites. I thought that this is different because the interactivity remains on top of the video. Maybe something a JavaScript novice like my self does not understand. That’s what makes me think there is more to it. For instance, the video of the Hedgehog below it seems to leave the last frame of the video in place. The skid marks stay on the page indefinitely. I am curious how this is done. It gives a nice animation effect. Once again, any examples or tutorials on integrating videos like so (so seamlessly) are welcome. Thanks, all :blush:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.