mediaelement-plugins icon indicating copy to clipboard operation
mediaelement-plugins copied to clipboard

After VAST is finished POSTROLL popup

Open gjonsson opened this issue 7 years ago • 5 comments

I noticed one issue in POSTROLL plugin. After VAST is done playing the POSTROLL opens over the actual video and i need to colse that.

gjonsson avatar Jul 04 '17 15:07 gjonsson

Thanks for noticing this. I will check this soon

rafa8626 avatar Jul 04 '17 17:07 rafa8626

Do you have a URL where I can see this issue please?

rafa8626 avatar Jul 04 '17 17:07 rafa8626

I don't. but if you look at the code where the addEventListener is, it is told to trigger at 'ended' but that also then triggers at VAST video END. I just changed the code for me so it trigger at pause and then closes on play.

I changed this t.media.addEventListener('ended', function () { to t.media.addEventListener('pause', function () { .display = 'block'; and added another that t.media.addEventListener('play', function () { .display = 'none';

Because i use postroll as Related video and not banner. :)

My version of the code is here.

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
'use strict';

mejs.i18n.en["mejs.close"] = "Close";

Object.assign(mejs.MepDefaults, {
	postrollCloseText: null
});

Object.assign(MediaElementPlayer.prototype, {
	buildpostroll: function buildpostroll(player, controls, layers) {
		var t = this,
		    postrollTitle = mejs.Utils.isString(t.options.postrollCloseText) ? t.options.postrollCloseText : mejs.i18n.t('mejs.close'),
		    postrollLink = t.container.querySelector('link[rel="postroll"]');

		if (postrollLink) {
			player.postroll = document.createElement('div');
			player.postroll.className = t.options.classPrefix + "postroll-layer " + t.options.classPrefix + "layer";
			player.postroll.innerHTML = "<a class=\"" + t.options.classPrefix + "postroll-close\" href=\"#\">" + postrollTitle + "</a>" + ("<div class=\"" + t.options.classPrefix + "postroll-layer-content\"></div>");
			player.postroll.style.display = 'none';

			layers.insertBefore(player.postroll, layers.firstChild);

			player.postroll.querySelector("." + t.options.classPrefix + "postroll-close").addEventListener('click', function (e) {
				this.parentNode.style.display = 'none';
				e.preventDefault();
				e.stopPropagation();
			});

			t.media.addEventListener('play', function () {
				mejs.Utils.ajax(postrollLink.getAttribute('href'), 'html', function (data) {
					layers.querySelector("." + t.options.classPrefix + "postroll-layer-content").innerHTML = data;
				});
				player.postroll.style.display = 'none';
			}, false);

			t.media.addEventListener('pause', function () {
				mejs.Utils.ajax(postrollLink.getAttribute('href'), 'html', function (data) {
					layers.querySelector("." + t.options.classPrefix + "postroll-layer-content").innerHTML = data;
				});
				player.postroll.style.display = 'block';
			}, false);
		}
	}
});

},{}]},{},[1]);

gjonsson avatar Jul 05 '17 11:07 gjonsson

I see. I have to rework the Ads plugin completely to fix many issues that the users had pointed out. This will be part of the fixes as well. I'll keep you posted on any progress. Thanks

rafa8626 avatar Jul 05 '17 11:07 rafa8626

Please make sure you star both project to continue improving this plugin and the player. Thanks

rafa8626 avatar Jul 05 '17 12:07 rafa8626