Developer Guide Javascript API Reference Developer Tools Release Notes

Async. API: External Header Bidding

A demo showing how to use the setPlaylistItemCallback to run external header bidding between playlist items

github

This is a demo for using the setPlaylistItemCallback API to cancel playback of the next item. The setPlaylistItemCallback API accepts a callback which returns a promise.

This callback is invoked between each playlist item, and blocks playback of the next playlist item until the promise is resolved, or rejected.

Demonstration

In this example, each playlist item is assigned a new ad tag. This demonstrates how a user would conduct external header bidding, through solutions such as Amazon A9. While this example updates the advertising tag, anything on the playlist item can be modified.

function performAsyncBidding(item, index) {
	// This is a mock function to demonstrate async. behavior
	return new Promise((resolve, reject) => {
		const adTags = [
			'http://playertest.longtailvideo.com/mid.xml',
			'http://playertest.longtailvideo.com/post.xml'
		]
		resolve(adTags[index - 1]);
	});
}

jwplayer('player').setup({
  playlist: [
		{
			file: "//playertest.longtailvideo.com/adaptive/bunny/manifest-no-captions.m3u8",
		},
		{
			file: "//playertest.longtailvideo.com/adaptive/bunny/manifest-no-captions.m3u8",
		},
		{
			file: "//playertest.longtailvideo.com/adaptive/bunny/manifest-no-captions.m3u8",
		},
  ],
  advertising: {
	  client: 'vast',
	  skipoffset: 2,
	  tag: 'http://playertest.longtailvideo.com/pre.xml',
  },
  height: 400,
  width: 600,
  autostart: true,
  mute: true,
})

jwplayer('player').setPlaylistItemCallback((item, index) => {
	// Resolve accepts a playlist item, this can be modified
	// The playlist item that is scheduled to load is
	// passed in as 'item'
	// Reject can be used to cancel a scheduled item from being loaded
	return new Promise((resolve, reject) => {
		// Handle external bidding and, in this example, return a modified tag
		return performAsyncBidding(item, index).then(adTag => {
		// Update the playlist item and pass it to resolve.
		const updatedAdSchedule = { tag: adTag, offset: 'pre' };
		const updatedPlaylistItem = Object.assign({}, item, { adschedule: [updatedAdSchedule] });
		resolve(updatedPlaylistItem);
		}).catch(() => {
			// If bidding fails, resolve with original, unmodified playlist item
			resolve();
		});
	}); 
});