Merge pull request mediaelement#660 from markomarkovic/feature-postroll

Feature postroll
rexblack · Dec 20, 2012 · efd13a7 · efd13a7
2 parents 6d586d2 + 320e127
commit efd13a7
Show file tree

Hide file tree

Showing 13 changed files with 192 additions and 3 deletions.
diff --git 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 =
+					$('<div class="mejs-postroll-layer mejs-layer"><a class="mejs-postroll-close" onclick="$(this).parent().hide();return false;">' + t.options.postrollCloseText + '</a><div class="mejs-postroll-layer-content"></div></div>').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
diff --git 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
diff --git 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 =
+					$('<div class="mejs-postroll-layer mejs-layer"><a class="mejs-postroll-close" onclick="$(this).parent().hide();return false;">' + t.options.postrollCloseText + '</a><div class="mejs-postroll-layer-content"></div></div>').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
diff --git a/demo/index.html b/demo/index.html
@@ -19,6 +19,7 @@ <h1>MediaElement.js</h1>
 	<li><a href="mediaelementplayer-youtube.html">MediaElementPlayer - YouTube</a> - controls on YouTube video</li>
 	<li><a href="mediaelementplayer-responsive.html">MediaElementPlayer - Responsive</a> - 100% player with YouTube</li>
 	<li><a href="mediaelementplayer-events.html">MediaElementPlayer - Events</a> - example of attaching events</li>
+	<li><a href="mediaelementplayer-postroll.html">MediaElementPlayer - Postroll</a> - showing something when video ends</li>
 
 </ul>
 

diff --git a/demo/mediaelementplayer-postroll-content.html b/demo/mediaelementplayer-postroll-content.html
@@ -0,0 +1,4 @@
+<div class="postroll">
+	<h3>Postroll content</h3>
+	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.</p>
+</div>
diff --git a/demo/mediaelementplayer-postroll.html b/demo/mediaelementplayer-postroll.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<title>HTML5 MediaElement</title>
+
+
+	<script src="../build/jquery.js"></script>
+	<script src="../build/mediaelement-and-player.min.js"></script>
+	<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />
+</head>
+<body>
+
+<h1>MediaElementPlayer.js</h1>
+
+<p>Recommended Setup</p>
+
+
+<h2>MP4/WebM video</h2>
+<video width="360" height="203" id="player2" controls="controls">
+	<source src="../media/echo-hereweare.mp4" type="video/mp4" title="mp4">
+	<source src="../media/echo-hereweare.webm" type="video/webm" title="webm">
+	<source src="../media/echo-hereweare.ogv" type="video/ogg" title="ogg">
+	<p>Your browser leaves much to be desired.</p>
+
+	<link rel="postroll" href="./mediaelementplayer-postroll-content.html" />
+</video>
+
+<script>
+$('audio,video').mediaelementplayer({
+	features: ['playpause','progress','volume','postroll']
+});
+</script>
+<style>
+.postroll {
+	padding: 5%;
+	color: #fff;
+}
+</style>
+
+</body>
+</html>
diff --git 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
@@ -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
@@ -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));
diff --git a/src/js/mep-feature-postroll.js 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 =
+					$('<div class="mejs-postroll-layer mejs-layer"><a class="mejs-postroll-close" onclick="$(this).parent().hide();return false;">' + t.options.postrollCloseText + '</a><div class="mejs-postroll-layer-content"></div></div>').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.$);