Search
Clear search
Close search
Google apps
Main menu

HTML5 video build guide: Standard video module

Step 1: Add video and add tracking metrics

You can add a video to any DoubleClick Rich Media creative. The best way to add one is by using the HTML5 <video> tag.

If you're unfamiliar with building DoubleClick Rich Media creatives, see HTML5 creative build guides.

Add a video to a creative

  1. Create a video element in a creative by adding the video tag to your HTML file and styling it in the CSS file. Then assign an ID to your element, for example, video1.
  2. Add source files.
    There are three video codecs to choose from because of different browser specifications. We recommend that you use all three for cross-browser compatibility.
    Sample <video> tag in your HTML file
    <video id="video1" controls="controls" poster="image.jpg">
       <source type="video/mp4" src="video.mp4" />
       <source type="video/ogg" src="video.ogg" />
       <source type="video/webm" src="video.webm" />
    </video>
    Sample styling and ID selector in your CSS file
    #video1 {
       position: absolute;
       width: 205px;
       height: 154px;
    }
    Notes
    • A video tag is an HTML5 element and isn't part of the Studio Enabler. For more information see HTML5 <video> tag.
    • The <video> tag code sample, above, automatically adds controls to your video. If you want to create custom controls, remove the controls attribute from the video tag. For more information, see Step 2: Add custom video controls.
    • The poster attribute in the same code sample specifies an image to be shown while the video is downloading or until the user presses the play button.
  3. The Enabler exposes an API to load in subsequent modules that contain additional functionality, and one of them is the video module. You can add tracking metrics to your JavaScript by loading the Studio Enabler’s Video module and attaching a reporting identifier.
Code snippet
var video1 = document.getElementById('video1');

Enabler.loadModule(studio.module.ModuleId.VIDEO, function() {
  studio.video.Reporter.attach('video_1', video1);
});
If you've set up multiple videos in your creative, track them using a single reporting identifier or different ones.

Add one reporting identifier to multiple videos

After adding multiple video elements to the  HTML file and styling them in the CSS file, add tracking metrics to your JavaScript by attaching a reporting identifier to the initial video. When the next video is accessed, detach the reporting identifier from the initial video, and attach the same reporting identifier to the next video. This sample code snippet demonstrates two videos that loop in this manner:

Code snippet
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');

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

// When video1 ends, detach reporting identifier,
// attach reporting identifier to video2,
// and vice versa.

video1.addEventListener('ended', video1EndHandler, false);

function video1EndHandler(e) {
   studio.video.Reporter.detach('my_video');
   studio.video.Reporter.attach('my_video', video2);
   video2.play();
}

video2.addEventListener('ended', video2EndHandler, false);

function video2EndHandler(e) {
   studio.video.Reporter.detach('my_video');
   studio.video.Reporter.attach('my_video', video1);
   video1.play();
}

Add multiple reporting identifiers to multiple videos

After adding multiple video elements to the HTML file and styling them in the CSS file, add tracking metrics to your JavaScript by attaching multiple reporting identifiers.

Code snippet
var video1 = document.getElementById('video1');
var video2 = document.getElementById('video2');

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

 

Was this article helpful?