Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2011
    Location
    Madrid
    Posts
    20
    Thanks
    3
    Thanked 1 Time in 1 Post

    Question Autoplay and autostop videos depending where you are

    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

  • #2
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Chuck Norris counted to infinity.
    Twice.

  • #3
    New Coder
    Join Date
    May 2011
    Location
    Madrid
    Posts
    20
    Thanks
    3
    Thanked 1 Time in 1 Post
    Anybody? I know how to do the scroll part but no the video part.

  • #4
    New to the CF scene
    Join Date
    May 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background video

    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>

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,696
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by MZBS View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •