Teaser Reels custom element

Teaser Reels is an HTML5 custom element for silently autoplaying videos in Studio rich media creatives. Custom elements allow web developers to define new types of HTML elements, or extend the behavior of core elements. Teaser Reels is built using the Custom Elements specification of the web components API.

If you use Google Web Designer, install the Teaser Reels custom component instead.

Teasers give viewers an engaging preview of a video's content to encourage them to watch the full video with sound. Mobile operating systems like Apple's iOS (before version 10+) often ignore the autoplay attribute on the standard HTML5 <video> element. Teaser Reels wraps the HTML5 <video> element, and allows you to play up to 30 seconds of silent video preview. When you click or tap on the teaser video, the full video is played. The initial autoplaying video and any loops aren’t counted as video views.

See an example creative

Features

• Allows high quality video autoplay across most devices and platforms
• Plays a teaser video for a maximum of 30 seconds
• When the teaser video is clicked, the full video plays with sound
• Loop the video and teaser video (optional)
• Wraps the HTML5 <video> element to enable both autoplaying teaser and a full video player

Prerequisites

• Your creative must be built as an HTML5 creative.
• Your HTML file must include the necessary script libraries, see the Includes section below.
• To support in-line play on iOS 10+, the playsinline attribute is required in ads, and is automatically included for you. There's no need to add the attribute to video elements.The attribute has also been added to existing creatives.

Includes

Before using the custom element, you must first add these scripts in the head of your creative's HTML file:

<script src="//s0.2mdn.net/ads/studio/Enabler.js"></script>
<script src="//s0.2mdn.net/ads/studio/videoteaser/1/avc_codec.js"></script>
<script src="//s0.2mdn.net/ads/studio/videoteaser/1/video_teaser_lib.js"></script>

Set up the custom element

To add the custom element to your HTML file, use a <video-teaser> element.

Calling the play() or pause() method on the video element will end the teaser video and display the full video. On web pages viewed on a mobile device, if you call these methods, the teaser may not play at all.

Example Teaser Reels tag

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video-teaser>

Limitations

• The custom element cannot be programmatically created by JavaScript or by modifying an existing tag. You must declare the element inside an HTML file with the required attributes. This means you cannot pull the video URL from a dynamic feed.
• For performance reasons, only a single Teaser Reel component can be used per creative.

Set custom element attributes

Use attributes to change the video teaser behavior. These attributes work the same way as standard HTML tags. Set your video's width and height, and add child <source> elements for each video source file you want to use. Alternatively, if you're using only one video source file, you can set the src attribute on the video-teaser element to a single filename.

Expand the sections below to learn about available attributes and see examples.

Required attributes

Expand all Collapse all

height

Set the height, in pixels, of the video and teaser video.

Example

Set the video height to 200 pixels:

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="200"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

poster

An image to display while the teaser is loading and when the teaser playback ends (when loop isn't set), or in case the quality of the autoplay is too poor.

Example

Set the poster image to starwars.jpg:

<video-teaser
​       controls
       loop
       teaserduration="7"
       width="320"
       height="200"
       teasersrc="movie.mp4"
       poster="starwars.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

teaserduration

Set the length of the teaser video, in seconds. This must be a numeric value greater than 0. Values with decimals are allowed (for example, 11.35).
Default value: 10 seconds
Maximum: 30 seconds

Example

Set the teaser length to fifteen seconds:

<video-teaser
​​       controls
       loop
       teaserduration="15"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

teasersrc

Set which source video to use for creating the teaser video. This must match the video specified in the src attribute, or one of the child <source> elements of the <video-teaser> element, if src isn’t used. If the <source> or src contains a path (for example, myfolder/movie.ogg), use only the filename (movie.ogg).

Example

Set the teaser source to the provided ogg video source:

<video-teaser
       ​​controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.ogg"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

width

Set the width, in pixels, of the video and teaser video.

Example

Set the video width to 400 pixels:

<video-teaser
       ​​controls
       loop
       teaserduration="7"
       width="400"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

 

Optional attributes

controls

Set whether to show controls when the full video plays. This attribute is optional, so if you don't want to show the controls, leave it out.

Example

Show video controls when the full video plays.

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

loop

Set whether video and teaser video should loop. This attribute is optional, so if you don't want the video and teaser to loop, leave it out.

Example

Replay the video and teaser video each time they end.

<video-teaser
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

preload

Set the preloading behavior of the full video. Accepted values are:

• auto - Loads the entire video when the page loads.
• metadata - Loads only the video's metadata when the page loads.
• none - The full video isn't loaded until the user clicks play.

If you need to minimize the number of requests and downloaded size of a Teaser Reels creative on a publisher page, set to none or metadata.

Example

Disable preloading of the full video.

<video-teaser
       controls
       preload="none"
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

src

Set a single source video to use. The src may contain a relative path along with the filename. If you set the src attribute, you don't need to append child <source> elements to the <video-teaser> element.

Example

Set a single source video.

<video-teaser
       ​​controls
       teaserduration="7"
       width="320"
       height="240"
       src="movie.mp4"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  Your browser does not support the video tag.
</video-teaser>

teaserexpandplay

Set whether to defer autoplay until the creative is expanded (fullscreen or regular), and stops it when collapsed. This attribute is optional, and relevant only for creatives which expand.

Example

Begin autoplay only after the creative expands.

<video-teaser
       teaserexpandplay
       controls
       loop
       teaserduration="7"
       width="320"
       height="240"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video-teaser>

 

Don't use the autoplay attribute. It isn't supported, and will throw an error.

Events and metrics

To record standard video events for the full video, attach the Studio video reporter to your video element.

Example

Attach the Studio video reporter to your video element.

Video tag:

<video-teaser
       controls
       id="video1"
       teaserduration="7"
       width="320"
       height="240"
       src="movie.mp4"
       teasersrc="movie.mp4"
       poster="poster.jpg">
  Your browser does not support the video tag.
</video-teaser>

 

JavaScript code used to attach the Studio video reporter:

var video1 = document.getElementById('video1');

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

 

Custom metrics

The teaser video supports custom metrics for the following teaser events. To record the events, add the desired timer or counter events using the names below in the Edit events step of the Studio creative workflow.

Counters

• Video Teaser Clicks
  The number of user interactions (clicks or taps) with the video teaser that result in the full video being played. 
• Video Teaser Loops
  The number of completed video teaser loops. Only recorded when the loop attribute is set.
• Video Teaser Quartile 1
  The number of times 25% of the video teaser played.
• Video Teaser Quartile 2
  The number of times 50% of the video teaser played.
• Video Teaser Quartile 3
  The number of times 75% of the video teaser played.
• Video Teaser Quartile 4
  The number of times 100% of the video teaser played.

Timers

• Video Teaser Timer
  The number of seconds the video teaser played, including loops.

Teaser Quartiles are calculated based on the teaserlength attribute, not the full video duration.

Preview and testing

To preview your teaser video, your creative must first be uploaded to Studio.

If your video isn't working, check when it was uploaded to Studio. Teaser Reels requires transcoded video files. Automatic video transcoding was enabled on March 17, 2015. If your file was uploaded before this date, you can rename the video in Asset Library to get transcodes generated for your file.

Ensuring high quality playback

Playback performance depends on the browser and device hardware the video is playing on. When the video first loads, there will be an initial 1-3 second testing phase where the hardware is benchmarked to determine whether full teaser play is supported.

If the benchmark results are too low to support high quality playback, the poster image is displayed instead. The poster image is also displayed any time during the video teaser playback if the video frame rate falls below a certain threshold, such as when viewing with a poor network connection.

Supported devices and browsers

Teaser Reels works on most modern browsers and platforms.

• MRAID 2.0-compliant SDK environments
• Desktop Safari, Internet Explorer 11+, Chrome, and Firefox
• Safari and Chrome on iOS devices less than 2 years old
• Chrome on Android devices less than 2 years old