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

---
title: How to add video ads
sidebar_position: 5
---

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

<div className="run-code">▶ Run Code</div>

```js
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();
			},
		},
	],
});

art.on('ready', function () {
	// 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);
});
```