4 Replies Latest reply on Oct 13, 2015 3:39 AM by benz78006347

    Interactive Video Index Page

    benzenium

      Hi guys,

       

      Im looking to create an index page for my site which is a short 10-15 second video that starts off looking as if its just a blank page, then audio plays, crechendo'ing in, then my site logo fades in and then the entry link to the site appears to take the user through to the homepage when clicked.

       

      I have a small ident created in After Effects, but I cant work out how to make it interactive to the point I have a mapped/sliced link appear at the end of it.

       

      Ideally Id stay away from using flash and utilise HTML to do it.

       

      Anyone got any ideas?

        • 1. Re: Interactive Video Index Page
          Jon Fritz II Adobe Community Professional & MVP

          Since my position in searches matters to me, I would place the video in a modal window over the top of my actual index page content (you do not want to have a blank page with a video be the actual landing page for search engine crawlers, it's just a bad plan).

           

          I would use the html5 <video> tag along with 2 video file formats to cover all browsers.

           

          I would then use some css and javascript to make the modal window close when the video ends and also offer the ability to close the window manually so people don't have to sit through it over and over.

           

          Something like this (copy and paste into a new document)...

           

          <!doctype html>

          <html lang="en-us">

          <head>

          <meta charset="utf-8">

          <title>Close Modal Window on Video End</title>

          <style>

          body {

              margin: 0;

              padding: 0;

          }

          /* the below sets the position of the modal window so it covers all site content */

          #modal-window {

              position: absolute;

              background-color: rgba(255,255,255,0.80); /* this makes it somewhat transparent */

              height: 100vh; /* this makes it fill 100% of the viewport height */

              width: 100vw; /* this makes it fill 100% of the viewport width */

              text-align: center; /* this centers the close link */

          }

          #the-video {

              display: block; /* this makes the video "center-able" */

              width: 400px; /* this sets the width of the video */

              margin: 25vh auto 0 auto; /* this centers the video horizontally and pushes it down 25% of the viewport height */

          }

          </style>

          </head>

           

          <body>

          <div id="modal-window"> <!-- note the id here is used in the css and in the javascript-->

            <video controls id="the-video"><!-- note the id here is used in the css and in the javascript-->

              <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" /> <!-- two video source to cover all browsers -->

              <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />

              Your browser does not support HTML5 video. </video>

              <!-- the below line allows the user to close the video themselves, note the id for the window is used here as well -->

            <a href="#" onclick="document.getElementById('modal-window').style.display = 'none';">Close Video</a>

          </div>

          <div id="content"> Everything else goes here </div>

           

          <!-- the close script comes last, just before the ending </body> tag -->

          <script>

          var vid = document.getElementById('the-video');

          vid.onended = function() {

              document.getElementById('modal-window').style.display = 'none';

          };

          </script>

          </body>

          </html>

          • 2. Re: Interactive Video Index Page
            Nancy OShea Adobe Community Professional & MVP

            I share Jon's concerns about search engine rankings.  So called intro or splash pages are not going to help you much with Google SERPs.  That said, you can fade in, fade out and redirect with jQuery.

            jQuery Fade In Page Load with Redirect - http://alt-web.com/

             

             

            Nancy O.

            1 person found this helpful
            • 3. Re: Interactive Video Index Page
              benz78006347

              Thanks Jon, thats very helpful and raises a very good point about the splash page and Google and SEO. Something I had not considered. =D

              • 4. Re: Interactive Video Index Page
                benz78006347 Level 1

                Thanks Nancy, thats a great idea. I am experimenting between yours and Jons replies. Both incredibly helpful! Loving the forum right now.