Jump to content
GreenSock

soupking

Polite & Expanding Load Examples

By soupking, in Banner Animation. Views: 2,000

Recommended Posts

Posted

Hi GS,

 

I need to build a video banner, both polite and expanding. I've done this a bazillion times in the Flash days (Pointroll, Sizmek, etc.) and I have a really solid understanding of H5/CSS/JS (both fixed and responsive) but I still don't have a really concrete grasp of how this should be structured for traffic and vendor implementation.

 

I know I can use Google Web Designer, but I'm really a big fan of vanilla JS and doing things from scratch. Can anybody help direct me to some basic examples of polite loads and/or expanding banners. Also, anything that contains video would be awesome.

 

If anybody has some samples of code to share in this arena I'd be grateful.

 

Thanks for reading. :)

 

 

Link to comment
Share on other sites
Posted

The entity formerly known as Doubleclick Studio has a unit they call Teaser Reels Component. Super easy, but you do need Studio access, as you do upload your video(s) as an asset to Studio.  The video is transcoded and served as appropriate based on the viewer's bandwidth, with poster image as the default.

 

Teaser Reels allow for up to 30 seconds of muted video that will play even on mobile. User interaction starts the video over with sound and will play the entire video if it is longer than your teaser duration.

 

And if you have Studio access, then you also have access to Studio Live Chat.

 

https://support.google.com/richmedia/answer/6232836?hl=en

  

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Studio Enabler Required -->
     <script src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
    <script src="https://www.gstatic.com/external_hosted/polymer/custom.elements.min.js"></script>
    <script src="https://s0.2mdn.net/ads/studio/videoteaser/0/avc_codec.js"></script>
    <script src="https://s0.2mdn.net/ads/studio/videoteaser/0/video_teaser_lib.js"></script>
    <script>
    //Declaring elements from the HTML i.e. Giving them Instance Names like in Flash - makes it easier
var container;
var content;
var bgExit;
var vid1Container;
var vid1;

//Function to run with any animations starting on load, or bringing in images etc
init = function(){
    
    //Assign All the elements to the element on the page
    container = document.getElementById('container_dc');
    content = document.getElementById('content_dc');
    bgExit = document.getElementById('background_exit_dc');
    vid1Container = document.getElementById('video1_container_dc');
    vid1 = document.getElementById('vid1');
    
    //Bring in listeners i.e. if a user clicks or rollovers
    addListeners();    
}

//Add Event Listeners
addListeners = function() {
    bgExit.addEventListener('click', bgExitHandler, false);
    vid1.addEventListener('ended', videoEndHandler, false);

    Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
    studio.video.Reporter.attach('video_1', vid1);
    });
}

bgExitHandler = function(e) {
    //Call Exits
    Enabler.exit('HTML5_Background_Clickthrough');
    vid1.pause();
}

videoEndHandler = function(e) {
    vid1.currentTime = 0;
    vid1.pause();
}
window.onload = function() {
  /* Initialize Enabler */
  if (Enabler.isInitialized()) {
    init();
  } else {
    Enabler.addEventListener(studio.events.StudioEvent.INIT, init);
  }
}   
    </script>
       
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <style>
    
@charset "UTF-8";
/* CSS Document */

/* Default style, feel free to remove if not needed. */
body, body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

#container_dc {
    position: absolute;
    width: 300px;
    height: 250px;
    top: 0;
    left: 0;
    margin: auto;
}

#content_dc {
    position: absolute;
    width: 298px;
    height: 248px;
    top: 0;
    left: 0;
        border:1px solid #666666;
    background-image: url(BG_teaser-Reel_KRO.png)
/*    background-color: #FFF;*/
/*    z-index: 100;*/

}

/* Invisible button for background clickthrough. */
#background_exit_dc {
    position: absolute;
    width: 300px;
    height: 80px;
    top: 170px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
    z-index: 400;
}

/* Div layer containing the video player and video controls. */
#video1_container_dc {
    position: absolute;
    width: 298px;
    height: 169px;
    top: 33px;
    left: 1px;
/*    background-color: #FFF;*/
/*    border: 1px solid #666666;*/
    z-index: 500;
}

#vid1 {
    z-index: 600;
}
                            
 }
        
        .video_controls_dc {
    position: absolute;
    width: 20px;
    bottom: 20px;
    height:18px;
    top: 357px;
    cursor: pointer;
    z-index: 300;
}

/* Video button hiding an positioning */
.video_controls_dc:hover {
    opacity:0.8;
  }

#video_control_play_dc {
    background-image:url('Play.png');
    background-repeat:no-repeat;
    left: 5px;
}

#video_control_pause_dc {
    background-image:url('Pause.png');
    background-repeat:no-repeat;
    left: 5px;
    visibility: hidden;
}

#video_control_stop_dc{
    background-image:url('Stop.png');
    background-repeat:no-repeat;
    left: 30px;
}

#video_control_unmute_dc {
    background-image:url('Unmute.png');
    background-repeat:no-repeat;
    right: 5px;
  }

#video_control_mute_dc {
    background-image:url('Mute.png');
    background-repeat:no-repeat;
    right: 5px;
    visibility: hidden;
}
#video_control_replay_dc {
    background-image:url('Replay.png');
    background-repeat:no-repeat;
    left: 55px;
}
 :focus {outline:none;}
::-moz-focus-inner {border:0;}
::-moz-focus-inner {border:0;}
   
    </style>
</head>
<body>
    <div id="container_dc">
        <div id="content_dc">
              </div>
        <button id="background_exit_dc"></button>
        <div id="video1_container_dc">
            <video 
                id="vid1"
                is="video-teaser"
                teaserduration="30"
                width="298"
                height="169"
                teasersrc="video.mp4"
                poster="poster.jpg"
                controls>
                  <source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
            </video>
        </div>
        
   
        
    </div>
    
    <script>
if (!Enabler.isInitialized()) {
  Enabler.addEventListener(
    studio.events.StudioEvent.INIT,
    enablerInitialized);
} else {
   enablerInitialized();
}
function enablerInitialized() {
  // Enabler initialized.
  // In App ads are rendered offscreen so animation should wait for
  // the visible event. These are simulated with delays in the local
  // environment.
  if (!Enabler.isVisible()) {
    Enabler.addEventListener(
      studio.events.StudioEvent.VISIBLE,
      adVisible);
  } else {
     adVisible();
  }
}
function adVisible() {
  // Ad visible, start ad/animation.
}
 var video1 = document.getElementById('vid1');

Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
  studio.video.Reporter.attach('vid1', vid1);
});
</script>
</body>
</html>

 

  • Like 3
Link to comment
Share on other sites
  • Author
Posted

Awesome, thanks for the full demo. That'll definitely help me approach Google's docs and build process for sure. :)

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
Login Create Account