How to implement midroll ad with MediaElements.JS?

Question

How to implement midroll ad with MediaElements.JS?

I made preroll and I hahe question here too. How to start ad after I press play button of original video?

I thought maybe there are some controls or whatever for ads, but I didn't find it.

Here is my code:

$('iframe').attr('allowfullscreen', '');
    $("iframe, object").each(function(i) {
        var thisYT = $(this);

        if (thisYT.is("iframe")) {
            var src = thisYT.attr('src');
        } else {
            var src = thisYT.attr('data');
        }

        var width = thisYT.attr('width');
        var height = thisYT.attr('height');

        var YTID = getId(src);

        if (YTID != "error") {
            thisYT.replaceWith('<video id="' + YTID + '" width="' + width + '" height="' + height + '" controls="control" preload="none"><source src="https://www.youtube.com/watch?v=' + YTID + '" type="video/youtube" /></video>');
        }

        var player = new MediaElementPlayer(YTID, {
            playsinline: true,
            features: ['playpause','current','progress','duration','volume','fullscreen','vast'],
            vastAdTagUrl: 'url',
            adsPrerollAdEnableSkip: 4,
            adsPrerollAdSkipSeconds: 10,
            success: function(mediaElement, originalNode, instance) {
                console.log(mediaElement, originalNode, instance);                  
            }
        });

    });


    function getId(url) {
        var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        var match = url.match(regExp);

        if (match && match[2].length == 11) {
            return match[2];
        } else {
            return 'error';
        }
    }

Answer 1

You need to install ad plugin for mediaelement.js for having required features for preroll and midroll Follow the instructions for using below repositiory

https://github.com/mediaelement/mediaelement-plugins/blob/master/docs/ads.md