---
title: Ads Plugin
sidebar_position: 2
---

## Demo

👉 [View Demo](https://artplayer.org/?libs=./uncompiled/artplayer-plugin-ads/index.js&example=ads)

## Install

### Install from `npm`:

```bash
$ npm install artplayer-plugin-ads
```

### Install from `yarn`:

```bash
$ yarn add artplayer-plugin-ads
```

### Install from `script`:

```html
<!-- local -->
<script src="path/to/artplayer-plugin-ads.js"></script>

<!-- jsdelivr -->
<script src="https://cdn.jsdelivr.net/npm/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>

<!-- unpkg -->
<script src="https://unpkg.com/artplayer-plugin-ads/dist/artplayer-plugin-ads.js"></script>
```

Then you can access the plugin function through `window.artplayerPluginAds`

## Use

<div className="run-code" data-libs="./uncompiled/artplayer-plugin-ads/index.js">
    ▶ Run Code
</div>

```js
var art = new Artplayer({
    container: '.artplayer-app',
    url: '/assets/sample/video.mp4',
    autoSize: true,
    fullscreen: true,
    fullscreenWeb: true,
    plugins: [
        artplayerPluginAds({
            // html ad, ignore this value if it is a video ad
            html: '<img src="/assets/sample/poster.jpg">',

            // The address of the video ad
            video: '/assets/sample/test1.mp4',

            // Ad redirect URL, if empty, no redirect
            url: 'http://artplayer.org',

            // The length of time that must be watched, the period cannot be skipped, the unit is seconds
            // When the value is greater than or equal to totalDuration, the ad cannot be closed early
            // When the value is equal to or less than 0, the ad can be turned off at any time
            playDuration: 5,

            // The total duration of the ad, in seconds
            totalDuration: 10,

            // Whether the video ads defaults to silence
            muted: false,

            // Multilingual support
            i18n: {
                close: 'Close Ads',
                countdown: '%s seconds',
                detail: 'Check Detail',
                canBeClosed: 'Ads can be closed after %s seconds',
            },
        }),
    ],
});

art.on('artplayerPluginAds:click', (ads) => {
    console.info('ad is clicked', ads);
});

art.on('artplayerPluginAds:skip', (ads) => {
    console.info('Ads are skipped', ads);
});
```