How to add video ads

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

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);
});