如何使用 Media Elements.JS 实现插播广告？答案

【问题标题】：How to implement midroll ad with MediaElements.JS?如何使用 Media Elements.JS 实现插播广告？
【发布时间】：2020-07-20 10:07:11
【问题描述】：

如何使用 MediaElements.JS 实现插播广告？

我做了预卷，我也在这里提问。按原视频播放键后如何开始广告？

我想也许有一些广告控件或其他什么，但我没有找到它。

这是我的代码：

$('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';
        }
    }

【问题讨论】：

标签： mediaelement mediaelement.js vast preroll

【解决方案1】：

您需要为 mediaelement.js 安装广告插件，以获得前贴片和插播片所需的功能按照以下存储库的使用说明进行操作

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

【讨论】：