...

View Full Version : Autoplay and autostop videos depending where you are



MZBS
12-12-2011, 12:40 AM
Hello,

I am trying to search some information about how to do a concept website like this:

http://unfold.no/

Exactly what I want is something similar with vertical scroll but instead of images or the map I want that when you are going down the page you find a background video for example in the first area with an autoplay and if you are continue going down the video stops automatically.

Not sure if there is any type of "control" when you can say: "When Video is on your screen auto-play and when dissapear from you screen stop.

I am not sure if this is posible to do with Javascript or maybe with Flash.

I have not found any example similar than this so not really sure if is a imposible fact.

Thank you for your time:D

Arnaud
12-12-2011, 01:31 PM
http://api.jquery.com/scrollTop/

MZBS
12-13-2011, 08:00 PM
Anybody? I know how to do the scroll part but no the video part.

araris
05-01-2012, 03:42 AM
I don't know how you would do the scroll part but to add a video to your background you would use the html5 video and canvas tags, and some css.

Hope this helps!

<html>
<head>
<style type="text/css">
body {
background: black;
}
#background {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
#content {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%;
overflow: auto;
max-height: 100%;
}
#v {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="background">
<video id="v" autoplay="true" loop="true">
<source src="your video here" type="video/ogg">
<source src="your video here" type="video/mp4">
</video>
</div>
<div id="content">
<p>Test text</p>
</div>
</body>
</html>

VIPStephan
05-01-2012, 06:05 PM
Anybody? I know how to do the scroll part but no the video part.

Thatís exactly how you do it. With scrollTop you can check how far the page has been scrolled and then play or stop the video depending on the position.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum