---
metadata:
  - name: generator
    content: Diplodoc Platform v5.34.3
alternate:
  - https://yandex.com/dev/video-sdk/doc/en/sdk-html5/adsdk-module.md
  - https://yandex.com/dev/video-sdk/doc/ru/sdk-html5/adsdk-module.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/video-sdk/doc/en/llms.txt

# AdLoader

A module for loading and playing ads «by location» (on a ready-made video tag at any time). The module's API implements interfaces for loading, preloading, and playing ads. Control over running these processes is carried out from an external code (on the ad tag side).

## Basic concepts {#termis}

#### Loading ads
Obtaining information about which ad creatives need to be played: in what sequence and with what parameters.
#### Preloading ads
Preparing data for the launch of ads to speed up subsequent launches of ad creatives.
#### Playing ads
Displaying an ad creative on the user's side.

## Ways to load ads {#adload}

The AdLoader module lets you load ads in different ways:

- Loading ads linked to a YAN ad campaign (using parameters such as `partnerId` and `category`). In this case, the parameters for loading and playing ads are taken from VMAP.
- Loading ads via a link. In this case, VMAP can be loaded to get ad playback parameters, but the ad itself will be loaded using the provided `vastUrl`.
- Initializing VAST by location. In this case, the `vast` parameter should pass a string with VAST XML. Additional ad loading will be carried out if VAST XML contains Wrapper elements (links to other VASTs). Ad playback parameters can be obtained from VMAP.

## Creating and playing ads

1. Create an [AdLoader](https://yandex.com/dev/video-sdk/doc/en/sdk-html5/AdLoaderObject.md) instance. To do this, call the `AdLoader.create(adConfig)` method for the `AdLoader` object.
2. Once the `AdLoader` instance is created, you can load ads using the `adLoader.loadAd();` method. As a result, a promise is returned with an [AdStore](https://yandex.com/dev/video-sdk/doc/en/sdk-html5/AdViewer-class.md) instance.
3. After creating the `AdStore` instance, preload ad creative files using the `AdStore.preload(preloadParams)` method to speed up subsequent ad launches. Or start playing content immediately using the `AdStore.showAd(videoSlot, slot, playbackParameters)` method.
4. If you need to carry out flexible control over playing ads, `AdStore` provides the `AdStore.createPlaybackController(videoSlot, slot, playbackParameters)` method that returns the [AdPlaybackController](https://yandex.com/dev/video-sdk/doc/en/sdk-html5/AdPlaybackController-class.md) object. `AdPlaybackController` lets you subscribe to ad events and call methods while ads are playing.


## Sample ad tag {#init}

> ```javascript
> ya.videoAd
>     .loadModule('AdLoader')
>     // 1) Create an AdLoader instance with ad parameters
>     .then(function(module) {
>         return module.AdLoader.create(
>             {
>                 partnerId: partnerId,
>                 category: category,
>                 // Optional block ID parameter. 
>                 // If the parameter is not specified, a preroll block type is used.
>                 impId: impId,
>             },
>         );
>     })
>     // 2) Load the ad
>     .then(function(adLoader) {
>         return adLoader.loadAd();
>     })
>     // 3) Preload the ad
>     // This step is skipped if the ad needs to be launched immediately
>     .then(function(adStore) {
>         return adStore.preload({
>             videoSlot: video,
>             desiredBitrate: 1000,
>         })
>         .then(function() {
>             return adStore;
>         })
>         .catch(function() {
>             // Ignore if something went wrong during preloading
>             // It is not a blocker for playback
>             return adStore;
>         });
>     })
>     // 4) Start the ad
>     .then(function(adStore) {
>         // Create a playback controller
>         const adPlaybackController = adStore.createPlaybackController(video, slot);
>         // Subscribe to the AdStopped event
>         adPlaybackController.subscribe('AdStopped', function() {
>             console.log('Ad stopped playing');
>         });
>         // Start ad playback
>         adPlaybackController.playAd();
>     })
>     // If something goes wrong, log the error to the console
>     .catch(function(error) {
>         console.error(error);
>     });        
> ```


## Test data {#test-data}

You can use the following settings for testing:

```javascript
{
  partnerId: 291193,
  category: 0,
}
```
[Test page example](https://yastatic.net/s3/doc-binary/src/dev/video-sdk/instream-with-ad-loader.html)


{% note warning %}

You can't use the current settings in the production environment

{% endnote %}