Using the Expanding Banner Component

Submitted by Crystal West on Sun, 2009-05-03 18:28
Technology
BEML
Required
Edition
Pro, Enterprise

This article will walk you through an example that demonstrates positioning and sizing the ExpandingBanner component in a custom BEML template.

The ExpandingBanner component is used by publishers to display different ad formats in a Brightcove 3 player. These ad formats range from a single banner ad to ad units that are synched with a video ad. See Supported Ad Formats and Format Codes for more information about Brightcove's natively-supported ad formats. The screenshot below illustrates a synched banner unit (ad format 2) displayed in one of Brightcove's supported player templates, the Compact Tabbed Navigation 3.0 template. The ExpandingBanner component is visually shown by the banner ad displayed at the bottom of the player as well as the companion unit covering the video playlist. These units are highlighted below in red.

The ExpandingBanner component shown above is represented in the BEML as the following:

<ExpandingBanner id="banner" expandedHeight="405" 
    width="728" height="90" expandedWidth="299" buttonWidth="90" 
    expandedOffsetY="-52" expandedOffsetX="458" 
    disableOnExpand="playlistTabs,videoList"/>

You can see that the component is easily configurable through the BEML. A detailed description of the ExpandingBanner component's properties can be found here. Using these properties, and other BEML layout principles, let's build a player template with a video player, video list, and expanding banner that expands down over the video list instead of up. When we're finished, here's what the player will look like, with ads trafficked. For more information about using the Brightcove Publishing module and BEML to create and edit player templates see Creating and Publishing Players.

Create the player template

Go to the Publishing module and click New Template. Let's start by inserting Runtime, Layout, and VBox tags as show below. Make sure to set the property boxType to "hbox" on the Layout tag. This will ensure that the visual elements in the layout tag will be positioned horizontally, from left to right. Also, add two VBox tags within the Layout tag. We will eventually place the video player in the first VBox and the list and banner in the second VBox. We use VBoxes here so that we can align elements vertically.

<Runtime>
  <Layout width="976" height="480" boxType="hbox">
    <VBox>
    </VBox>
    <VBox gutter="16">
    </VBox>
  </Layout>
</Runtime>

Now, add the VideoPlayer and List component to your template as shown below. Insert the VideoPlayer element in the first VBox and the List/List Item elements in the second VBox with the gutter set to "16." The gutter is set to ensure there is a little bit of horizontal space between the two VBoxes. Make sure to set the width, height, and content bindings as shown. For more information on the VideoPlayer, List and ListItem components see the BEML DTD Reference.

<Runtime>
  <Layout width="976" height="480" boxType="hbox">
    <VBox>
      <VideoPlayer id="videoPlayer" width="480" height="406" 
                   video="{videoList.selectedItem}"/>
    </VBox>
    <VBox gutter="16">
       <List id="videoList" width="468" height="406" rowHeight="76" selectOnClick="true">
           <ListItem boxType="hbox" gutter="7">
             <Spacer width="1"/>
             <VBox width="80">
               <Spacer height="8"/>
               <ThumbnailButton data="{currentItem}" height="60" source="{currentItem.thumbnailURL}"/> 
             </VBox>
             <VBox gutter="1">
               <Spacer height="4"/>
               <TitleLabel height="18" text="{currentItem.displayName}" truncate="true"/>
               <Label multiline="true" text="{currentItem.shortDescription}" truncate="true"/>             
             </VBox>             
             <Spacer width="1"/>
           </ListItem>
       </List> 
     </VBox>
  </Layout>
</Runtime>

You should now be able to save and preview your template. Next, create a new player that uses your template and assign content to it so you can really preview your custom BEML. Your player should look very similar to the Compact Tabbed Navigation 3.0 template (missing only the playlist tabs and detailed video information). See the screenshot below for a preview of the player without the ExpandingBanner component.

Create the ExpandingBanner component

Now, let's add the ExpandingBanner component to the upper right hand hand corner of the custom template. Since the pod unit in the banner needs to expand over top of the List, we need to make sure it is placed after the List in the BEML. Placing it after the List ensures that the ExpandingBanner will be higher in the stacking order of components in the BEML and will, therefore, be displayed on top of the List when an ad is rendered. Then, wrap the List and ExpandingBanner in a Canvas tag so that the ExpandingBanner can be placed in any position within the VBox. Go ahead and add a Canvas tag around the VideoPlayer as well so we can top align the VideoPlayer and List.

We want to natively support ad formats 6 (468x60 banner), 2 (468x60 video pod), and 20 (468x60 overlay pod) so make sure the banner has a width of 468 and height of 60. Those ad formats will automatically be sent in the ad call since the ExpandingBanner is the exact size specified by the formats. If you want to load a different ad format in the ExpandingBanner component, see the Ads and Custom Player Templates article for more information about the advertising options available in custom templates. We also don't want users to be able to switch the content video while the ad is playing so make sure disableOnExpand is set to the List id "videoList."

<Runtime>
  <Layout width="976" height="480" boxType="hbox">
    <VBox>
      <Canvas> 
        <VideoPlayer id="videoPlayer" width="480" height="406" video="{videoList.selectedItem}"/>
      </Canvas> 
    </VBox>
    <VBox gutter="16">
      <Canvas> 
        <List id="videoList" width="468" height="406" rowHeight="76" selectOnClick="true">
          <ListItem boxType="hbox" gutter="7">
            <Spacer width="1"/>
            <VBox width="80">
              <Spacer height="8"/>
              <ThumbnailButton data="{currentItem}" height="60" 
                               source="{currentItem.thumbnailURL}"/>
            </VBox>
            <VBox gutter="1">
              <Spacer height="4"/>
              <TitleLabel height="18" text="{currentItem.displayName}" truncate="true"/>
              <Label multiline="true" text="{currentItem.shortDescription}" truncate="true"/>
            </VBox>
            <Spacer width="1"/>
          </ListItem>
        </List>
        <ExpandingBanner id="banner" width="468" height="60" disableOnExpand="videoList"/>
       </Canvas> 
    </VBox>
  </Layout>
</Runtime>

Position the ExpandingBanner component

Add a y parameter to both the ExpandingBanner and to the List. Set the ExpandingBanner y position to be "0" and the list to be "70." Since the ExpandingBanner is 60 pixels high, there should now be about 10 pixels separating the two components in the layout. Go ahead and also set the VideoPlayer y position to be "70" as well so that it is top-aligned with the List. Since we've added this 10 pixel buffer between the ExpandingBanner and List, make sure to set the expandedOffsetY to also be 10 pixels so that the expanding unit will line up directly on top of the List. Set the expandedHeight to be 406 (the same height as the List) and make sure the expandDirection is "down." The width of the expanding unit will be the same as the width of the ExpandingBanner.

<Runtime>
  <Layout width="976" height="480" boxType="hbox">
    <VBox>
      <Canvas>
        <VideoPlayer id="videoPlayer" y="70" width="480" height="406"
             video="{videoList.selectedItem}"/>
      </Canvas>
    </VBox>
    <VBox gutter="16">
      <Canvas>
        <List id="videoList" width="468" height="406" y="70" rowHeight="76"
             selectOnClick="true">
          <ListItem boxType="hbox" gutter="7">
            <Spacer width="1"/>
            <VBox width="80">
              <Spacer height="8"/>
              <ThumbnailButton data="{currentItem}" height="60"
                               source="{currentItem.thumbnailURL}"/>
            </VBox>
            <VBox gutter="1">
              <Spacer height="4"/>
              <TitleLabel height="18" text="{currentItem.displayName}" truncate="true"/>
              <Label multiline="true" text="{currentItem.shortDescription}"
                 truncate="true"/>
            </VBox>
            <Spacer width="1"/>
          </ListItem>
        </List>
        <ExpandingBanner id="banner" width="468" height="60" y="0"
           expandedHeight="406" expandDirection="down" expandedOffsetY="10"
           disableOnExpand="videoList"/>
      </Canvas>
    </VBox>
  </Layout>
</Runtime>

Save your template and traffic an ad to your player, making sure to set an ad policy for your player in the Advertising Module. Click here to view a working example player with ads already trafficked. The full BEML for this example custom template as well as a screenshot of the final player with ads is below. Feel free to use this sample as a baseline for other custom templates using the ExpandingBanner component!

Full Example BEML

<Runtime>
  <Layout width="976" height="480" boxType="hbox">
    <VBox>
      <Canvas>
        <VideoPlayer id="videoPlayer" y="70" width="480" height="406"
             video="{videoList.selectedItem}"/>
      </Canvas>
    </VBox>
    <VBox gutter="16">
      <Canvas>
        <List id="videoList" width="468" height="406" y="70" rowHeight="76"
             selectOnClick="true">
          <ListItem boxType="hbox" gutter="7">
            <Spacer width="1"/>
            <VBox width="80">
              <Spacer height="8"/>
              <ThumbnailButton data="{currentItem}" height="60" 
                               source="{currentItem.thumbnailURL}"/>
            </VBox>
            <VBox gutter="1">
              <Spacer height="4"/>
              <TitleLabel height="18" text="{currentItem.displayName}" truncate="true"/>
              <Label multiline="true" text="{currentItem.shortDescription}" truncate="true"/>
            </VBox>
            <Spacer width="1"/>
          </ListItem>
        </List>
        <ExpandingBanner id="banner" width="468" height="60" y="0" expandedHeight="406"
                 expandDirection="down" expandedOffsetY="10" disableOnExpand="videoList"/>
      </Canvas>
    </VBox>
  </Layout>
</Runtime>