ad-video

Description

The <ad-video> tag creates a video player instance within the ad. This player functions differently than the standard HTML5 video element in a number of ways:

• It automatically tracks video view and interaction data when trafficked through the Specless platform
• It automatically pauses when the ad goes out of view
• It enforces muting when autoplay is enabled
• It has options to force the video to fill its parent container
• Allows an alternative set of simplified controls to be used
• Allows YouTube videos to be set as the source

Child Elements

• <ad-video-endframe>

Example Usage

<!-- Basic Example -->
<ad-video id="playerId" name="My Awesome Video" src="/assets/video.mp4" simple-controls poster="/assets/poster.jpg"></ad-video>

🚧

Must Include a Unique ID

The <ad-video> element must include a unique value for the id attribute.

Attributes

Javascript API

Getting the Player Instance

ad.plugins.Video.get("myPlayer").ready(function(player) {
	var myPlayer = player;
 // Run your code here to control the video player
  myPlayer.play();
  myPlayer.pause();
});

Basic Methods

Below are the basic methods used to control video playback. The ad-video element uses video.js, so additional methods can be within the video.js documentation below.

• Full video.js API

.play()

Starts media playback.

player.play() // Plays the video

.pause()

Stops media playback.

player.pause() // Pauses the video

.paused()

Checks if the player is paused. Returns true or false.

var isPaused = player.paused() // Returns true or false

.muted(muted)

Gets or sets the current muted state of the player.

var isMuted = player.muted(); // Returns true of false

if (isMuted === false) {
  player.muted(true) // Mutes the player
}

.currentTime(time)

Gets or sets the current time of the video.

var currentTime = player.currentTime(); // Returns the current time of playback in seconds

player.currentTime(120); // Sets the current playback time to 2 minutes

.duration()

Gets the total length of the current video.

var duration = player.duration() // Returns the length of the video

.ended()

Returns true/false if the video has ended or not.

if (player.ended() === true) {
	// Do something if the video has ended
}

.on(event, callback)

Runs callback when the event event is fired by the player.

player.on('play', function() {
	// Do something when the ad plays
}
      
player.on('pause', function() {
	// Do something when the ad pauses
}

Events that can be passed into the .on() function are as follows:

• ended Fired when video playback ends.
• error Fired when an error occurs.
• loadeddata Fired when the player has downloaded data at the current playback position.
• loadedmetadata Fired when the player has initial duration and dimension information.
• timeupdate Fired when the current playback position has changed * During playback this is fired every 15-250 milliseconds, depending on the playback technology in use.
• play Fired when media playback starts.
• pause Fired when media playback stops.
• useractive Fired when the user is active, e.g. moves the mouse over the player.
• userinactive Fired when the user is inactive, e.g. a short delay after the last mouse move or control interaction.
• volumechange Fired when the volume changes.