ArtPlayer/packages/artplayer-document/docs/en/Questions/How to add video ads.md

title, sidebar_position

title	sidebar_position
How to add video ads	5

Video ads play before main video playback, support multiple video ads

▶ Run Code

var art = new Artplayer({
	container: '.artplayer-app',
	url: 'https://artplayer.org/assets/sample/video.mp4',
	muted: true,
	autoSize: true,
	autoplay: true,
	ads: [
		{
			url: '/assets/sample/test1.mp4'
		},
		{
			url: '/assets/sample/test2.webm'
		},
	],
	controls: [
		{
			position: 'right',
			html: 'Skip The Ads',
			click: function () {
				// Skip The Ads
				art.ads.end();
			},
		},
	],
	layers: [
		{
			html: 'Skip The Ads',
			style: {
				position: 'absolute',
				top: '20px',
				right: '20px',
			},
			click: function () {
				// Skip The Ads
				art.ads.end();
			},
		},
	],
});

// Triggers when each video advertisement is played
art.on('ads:start', (item) => {
	console.info('Ads is playing: ' + item.url);
});

// Triggers when all video advertisements are end
art.on('ads:end', () => {
	console.info('Ads is end');
});

// Current advertising index
console.info(art.ads.index);

// Whether all the advertisements are ended
console.info(art.ads.isEnd);

// Whether the advertisement is playing
console.info(art.ads.playing);

// The object of the prev advertisement
console.info(art.ads.prev);

// The object of the current advertisement
console.info(art.ads.current);

// The object of the next advertisement
console.info(art.ads.next);