diff --git a/build/mediaelement-and-player.js b/build/mediaelement-and-player.js index d089af51d..2306eff71 100644 --- a/build/mediaelement-and-player.js +++ b/build/mediaelement-and-player.js @@ -4609,4 +4609,39 @@ $.extend(mejs.MepDefaults, }); })(mejs.$); +/** + * Postroll plugin + */ +(function($) { + + $.extend(mejs.MepDefaults, { + postrollCloseText: mejs.i18n.t('Close') + }); + + // Postroll + $.extend(MediaElementPlayer.prototype, { + buildpostroll: function(player, controls, layers, media) { + var + t = this, + postrollLink = t.container.find('link[rel="postroll"]').attr('href'); + + if (typeof postrollLink !== 'undefined') { + player.postroll = + $('
' + t.options.postrollCloseText + '
').prependTo(layers).hide(); + + t.media.addEventListener('ended', function (e) { + $.ajax({ + dataType: 'html', + url: postrollLink, + success: function (data, textStatus) { + layers.find('.mejs-postroll-layer-content').html(data); + } + }); + player.postroll.show(); + }, false); + } + } + }); + +})(mejs.$); diff --git a/build/mediaelement-and-player.min.js b/build/mediaelement-and-player.min.js index c9dadb9f2..48892e481 100644 --- a/build/mediaelement-and-player.min.js +++ b/build/mediaelement-and-player.min.js @@ -153,4 +153,6 @@ f.extend(MediaElementPlayer.prototype,{buildcontextmenu:function(a){a.contextMen true},disableContextMenu:function(){this.isContextMenuEnabled=false},contextMenuTimeout:null,startContextMenuTimer:function(){var a=this;a.killContextMenuTimer();a.contextMenuTimer=setTimeout(function(){a.hideContextMenu();a.killContextMenuTimer()},750)},killContextMenuTimer:function(){var a=this.contextMenuTimer;if(a!=null){clearTimeout(a);delete a}},hideContextMenu:function(){this.contextMenu.hide()},renderContextMenu:function(a,b){for(var c=this,e="",d=c.options.contextMenuItems,g=0,k=d.length;g< k;g++)if(d[g].isSeparator)e+='
';else{var h=d[g].render(c);if(h!=null)e+='
'+h+"
"}c.contextMenu.empty().append(f(e)).css({top:b,left:a}).show();c.contextMenu.find(".mejs-contextmenu-item").each(function(){var o=f(this),n=parseInt(o.data("itemindex"),10),p=c.options.contextMenuItems[n];typeof p.show!="undefined"&&p.show(o,c);o.click(function(){typeof p.click!= "undefined"&&p.click(c);c.contextMenu.hide()})});setTimeout(function(){c.killControlsTimer("rev3")},100)}})})(mejs.$); +(function(f){f.extend(mejs.MepDefaults,{postrollCloseText:mejs.i18n.t("Close")});f.extend(MediaElementPlayer.prototype,{buildpostroll:function(a,b,c){var e=this.container.find('link[rel="postroll"]').attr("href");if(typeof e!=="undefined"){a.postroll=f('
'+this.options.postrollCloseText+'
').prependTo(c).hide();this.media.addEventListener("ended", +function(){f.ajax({dataType:"html",url:e,success:function(d){c.find(".mejs-postroll-layer-content").html(d)}});a.postroll.show()},false)}}})})(mejs.$); diff --git a/build/mediaelement.js b/build/mediaelement.js index bd17c81aa..ea6bb4353 100644 --- a/build/mediaelement.js +++ b/build/mediaelement.js @@ -1801,7 +1801,8 @@ window.MediaElement = mejs.MediaElement; exports.de = { "Fullscreen" : "Vollbild", "Go Fullscreen" : "Vollbild an", - "Turn off Fullscreen" : "Vollbild aus" + "Turn off Fullscreen" : "Vollbild aus", + "Close" : "Schließen" }; }(mejs.i18n.locale.strings)); diff --git a/build/mediaelement.min.js b/build/mediaelement.min.js index c642511be..b864ec253 100644 --- a/build/mediaelement.min.js +++ b/build/mediaelement.min.js @@ -61,4 +61,4 @@ c,d)};c.addEventListener("onStateChange",a);setInterval(function(){mejs.YouTubeA c,"pause");break;case 3:mejs.YouTubeApi.createEvent(b,c,"progress")}}};function onYouTubePlayerAPIReady(){mejs.YouTubeApi.iFrameReady()}function onYouTubePlayerReady(a){mejs.YouTubeApi.flashReady(a)}window.mejs=mejs;window.MediaElement=mejs.MediaElement; (function(a,b,c){var d={locale:{strings:{}},methods:{}};d.locale.getLanguage=function(){return{language:navigator.language}};d.locale.INIT_LANGUAGE=d.locale.getLanguage();d.methods.checkPlain=function(e){var g,f,h={"&":"&",'"':""","<":"<",">":">"};e=String(e);for(g in h)if(h.hasOwnProperty(g)){f=RegExp(g,"g");e=e.replace(f,h[g])}return e};d.methods.formatString=function(e,g){for(var f in g){switch(f.charAt(0)){case "@":g[f]=d.methods.checkPlain(g[f]);break;case "!":break;default:g[f]= ''+d.methods.checkPlain(g[f])+""}e=e.replace(f,g[f])}return e};d.methods.t=function(e,g,f){if(d.locale.strings&&d.locale.strings[f.context]&&d.locale.strings[f.context][e])e=d.locale.strings[f.context][e];if(g)e=d.methods.formatString(e,g);return e};d.t=function(e,g,f){if(typeof e==="string"&&e.length>0){var h=d.locale.getLanguage();f=f||{context:h.language};return d.methods.t(e,g,f)}else throw{name:"InvalidArgumentException",message:"First argument is either not a string or empty."}; -};c.i18n=d})(jQuery,document,mejs);(function(a){a.de={Fullscreen:"Vollbild","Go Fullscreen":"Vollbild an","Turn off Fullscreen":"Vollbild aus"}})(mejs.i18n.locale.strings); +};c.i18n=d})(jQuery,document,mejs);(function(a){a.de={Fullscreen:"Vollbild","Go Fullscreen":"Vollbild an","Turn off Fullscreen":"Vollbild aus",Close:"Schlie\u00dfen"}})(mejs.i18n.locale.strings); diff --git a/build/mediaelementplayer.js b/build/mediaelementplayer.js index abc05cb16..63c64f60e 100644 --- a/build/mediaelementplayer.js +++ b/build/mediaelementplayer.js @@ -2801,3 +2801,38 @@ $.extend(mejs.MepDefaults, }); })(mejs.$); +/** + * Postroll plugin + */ +(function($) { + + $.extend(mejs.MepDefaults, { + postrollCloseText: mejs.i18n.t('Close') + }); + + // Postroll + $.extend(MediaElementPlayer.prototype, { + buildpostroll: function(player, controls, layers, media) { + var + t = this, + postrollLink = t.container.find('link[rel="postroll"]').attr('href'); + + if (typeof postrollLink !== 'undefined') { + player.postroll = + $('
' + t.options.postrollCloseText + '
').prependTo(layers).hide(); + + t.media.addEventListener('ended', function (e) { + $.ajax({ + dataType: 'html', + url: postrollLink, + success: function (data, textStatus) { + layers.find('.mejs-postroll-layer-content').html(data); + } + }); + player.postroll.show(); + }, false); + } + } + }); + +})(mejs.$); diff --git a/build/mediaelementplayer.min.js b/build/mediaelementplayer.min.js index 84121adcf..58dc1ef28 100644 --- a/build/mediaelementplayer.min.js +++ b/build/mediaelementplayer.min.js @@ -88,3 +88,5 @@ f.extend(MediaElementPlayer.prototype,{buildcontextmenu:function(a){a.contextMen true},disableContextMenu:function(){this.isContextMenuEnabled=false},contextMenuTimeout:null,startContextMenuTimer:function(){var a=this;a.killContextMenuTimer();a.contextMenuTimer=setTimeout(function(){a.hideContextMenu();a.killContextMenuTimer()},750)},killContextMenuTimer:function(){var a=this.contextMenuTimer;if(a!=null){clearTimeout(a);delete a}},hideContextMenu:function(){this.contextMenu.hide()},renderContextMenu:function(a,b){for(var c=this,e="",d=c.options.contextMenuItems,g=0,k=d.length;g< k;g++)if(d[g].isSeparator)e+='
';else{var h=d[g].render(c);if(h!=null)e+='
'+h+"
"}c.contextMenu.empty().append(f(e)).css({top:b,left:a}).show();c.contextMenu.find(".mejs-contextmenu-item").each(function(){var o=f(this),n=parseInt(o.data("itemindex"),10),p=c.options.contextMenuItems[n];typeof p.show!="undefined"&&p.show(o,c);o.click(function(){typeof p.click!= "undefined"&&p.click(c);c.contextMenu.hide()})});setTimeout(function(){c.killControlsTimer("rev3")},100)}})})(mejs.$); +(function(f){f.extend(mejs.MepDefaults,{postrollCloseText:mejs.i18n.t("Close")});f.extend(MediaElementPlayer.prototype,{buildpostroll:function(a,b,c){var e=this.container.find('link[rel="postroll"]').attr("href");if(typeof e!=="undefined"){a.postroll=f('
'+this.options.postrollCloseText+'
').prependTo(c).hide();this.media.addEventListener("ended", +function(){f.ajax({dataType:"html",url:e,success:function(d){c.find(".mejs-postroll-layer-content").html(d)}});a.postroll.show()},false)}}})})(mejs.$); diff --git a/demo/index.html b/demo/index.html index fec6d882b..0a7dd4279 100644 --- a/demo/index.html +++ b/demo/index.html @@ -19,6 +19,7 @@

MediaElement.js

  • MediaElementPlayer - YouTube - controls on YouTube video
  • MediaElementPlayer - Responsive - 100% player with YouTube
  • MediaElementPlayer - Events - example of attaching events
    • +
  • MediaElementPlayer - Postroll - showing something when video ends
    • diff --git a/demo/mediaelementplayer-postroll-content.html b/demo/mediaelementplayer-postroll-content.html new file mode 100644 index 000000000..f0b6d3aa6 --- /dev/null +++ b/demo/mediaelementplayer-postroll-content.html @@ -0,0 +1,4 @@ +
    +

    Postroll content

    +

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.

    +
    \ No newline at end of file diff --git a/demo/mediaelementplayer-postroll.html b/demo/mediaelementplayer-postroll.html new file mode 100644 index 000000000..565f5abe8 --- /dev/null +++ b/demo/mediaelementplayer-postroll.html @@ -0,0 +1,42 @@ + + + + + HTML5 MediaElement + + + + + + + + +

    MediaElementPlayer.js

    + +

    Recommended Setup

    + + +

    MP4/WebM video

    + + + + + + + diff --git a/src/Builder.py b/src/Builder.py index b0f73b3f5..0889982b4 100755 --- a/src/Builder.py +++ b/src/Builder.py @@ -44,6 +44,7 @@ mep_files.append('mep-feature-fullscreen.js') mep_files.append('mep-feature-tracks.js') mep_files.append('mep-feature-contextmenu.js') +mep_files.append('mep-feature-postroll.js') # mep_files.append('mep-feature-sourcechooser.js') code = '' diff --git a/src/css/mediaelementplayer.css b/src/css/mediaelementplayer.css index 4f14f499f..55162943b 100644 --- a/src/css/mediaelementplayer.css +++ b/src/css/mediaelementplayer.css @@ -807,3 +807,33 @@ font-size: 10px; } /* End: SourceChooser */ + + +/* Start: Postroll */ +.mejs-postroll-layer { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + background: url(background.png); + background: rgba(50,50,50,0.7); + z-index: 1000; + overflow: hidden; +} +.mejs-postroll-layer-content { + width: 100%; + height: 100%; +} +.mejs-postroll-close { + position: absolute; + right: 0; + top: 0; + background: url(background.png); + background: rgba(50,50,50,0.7); + color: #fff; + padding: 4px; + z-index: 100; + cursor: pointer; +} +/* End: Postroll */ diff --git a/src/js/me-i18n-locale-de.js b/src/js/me-i18n-locale-de.js index eac941535..c3f4638a9 100644 --- a/src/js/me-i18n-locale-de.js +++ b/src/js/me-i18n-locale-de.js @@ -19,7 +19,8 @@ exports.de = { "Fullscreen" : "Vollbild", "Go Fullscreen" : "Vollbild an", - "Turn off Fullscreen" : "Vollbild aus" + "Turn off Fullscreen" : "Vollbild aus", + "Close" : "Schließen" }; }(mejs.i18n.locale.strings)); \ No newline at end of file diff --git a/src/js/mep-feature-postroll.js b/src/js/mep-feature-postroll.js new file mode 100644 index 000000000..5de9a342a --- /dev/null +++ b/src/js/mep-feature-postroll.js @@ -0,0 +1,35 @@ +/** + * Postroll plugin + */ +(function($) { + + $.extend(mejs.MepDefaults, { + postrollCloseText: mejs.i18n.t('Close') + }); + + // Postroll + $.extend(MediaElementPlayer.prototype, { + buildpostroll: function(player, controls, layers, media) { + var + t = this, + postrollLink = t.container.find('link[rel="postroll"]').attr('href'); + + if (typeof postrollLink !== 'undefined') { + player.postroll = + $('
    ' + t.options.postrollCloseText + '
    ').prependTo(layers).hide(); + + t.media.addEventListener('ended', function (e) { + $.ajax({ + dataType: 'html', + url: postrollLink, + success: function (data, textStatus) { + layers.find('.mejs-postroll-layer-content').html(data); + } + }); + player.postroll.show(); + }, false); + } + } + }); + +})(mejs.$); \ No newline at end of file