Fixed a lot of stuff concerning IE9 and Windows 7

moay · Sep 7, 2015 · 9ee1397 · 9ee1397
1 parent 0456a8d
commit 9ee1397
Show file tree

Hide file tree

Showing 9 changed files with 93 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -10,10 +10,10 @@ You can see a first demo of afterglow here: [afterglowplayer.com/sandbox](http:/
 
 As this is not even the first beta release, there will be some limitations. We currently are aware of these issues:
 
-- IE support is not ready yet. It will work on Edge, IE11 and IE10 but the skin needs to be adopted to work well in IE9. IE8 ~~seems not to be working at all yet~~ will not be supported. Read more [here](http://community.afterglowplayer.com/discussion/5/support-for-ie8).
+- IE support is not ready yet. It will work on Edge, IE11 and IE10 but the skin needs to be adopted to work well in IE9. IE8 ~~seems not to be working at all yet~~ will not be supported. Read more [here](http://community.afterglowplayer.com/discussion/5/support-for-ie8). *Partially fixed with v0.0.34 - lightboxes won't work on IE9/Windows 7*
 - The lightbox closing button may not work on mobile devices. Please test this and tell us about it.
 - ~~Youtube videos don't work in lightbox players.~~ *Fixed with v0.0.28*
-- The lightbox seems to not work perfectly on some devices.
+- ~~The lightbox seems to not work perfectly on some devices.~~ *Fixed with v0.0.32*
 
 ## Setup
 

diff --git a/dist/afterglow.min.js b/dist/afterglow.min.js
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "afterglow",
   "description": "An easy to integrate HTML5 video player with lightbox support.",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "license": "MIT",
   "repository": {
     "type": "git",

diff --git a/sandbox/index.html b/sandbox/index.html
@@ -35,14 +35,11 @@
 	<h1>This is just a sandbox for development.</h1>
 <!-- YOUTUBE TEST -->
 	<h2>Youtube video</h2>
-	<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" preload="none"></video>
+	<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300" data-autoresize="fit" preload="none" ytControls="true"></video>
 
 	<!-- LOCAL TEST -->
-	<h2>Local video with poster</h2>
-	<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
-		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
-		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
-	</video>
+	<h2>Local video, single source, with poster</h2>
+	<video id="video2" class="afterglow" width="1920" height="1080" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none" src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4"></video>
 
 	<!-- LOCAL TEST -->
 	<h2>Local video with poster, captions and subtitles</h2>

diff --git a/sandbox/releasetest.html b/sandbox/releasetest.html
@@ -17,6 +17,12 @@
 </head>
 <body>
 	<h1>This is just a sandbox for development.</h1>
+	<h2>Local video with poster opened in lightbox</h2>
+	<a href="#video3" class="afterglow">Open the lightbox</a>
+	<video id="video3" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
+		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
+		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
+	</video>
 
 	<!-- YOUTUBE TEST -->
 	<h2>Youtube video</h2>
@@ -39,12 +45,6 @@ <h2>Local video with poster, captions and subtitles</h2>
 
 	<!-- LIGHTBOX TEST -->
 	<!-- LOCAL TEST -->
-	<h2>Local video with poster opened in lightbox</h2>
-	<a href="#video3" class="afterglow">Open the lightbox</a>
-	<video id="video3" width="640" height="360" poster="http://afterglowplayer.com/sandbox/video/Snapshots/afterglow_local.jpg" data-autoresize="fit" preload="none">
-		<source src="http://afterglowplayer.com/sandbox/video/MP4/afterglow_local.mp4" type="video/mp4" />
-		<source src="http://afterglowplayer.com/sandbox/video/WEBM/afterglow_local.webm" type="video/webm" />
-	</video>
 	<!-- LOCAL TEST -->
 	<h2>Youtube opened in lightbox</h2>
 	<a href="#video4" class="afterglow">Open the lightbox</a>

diff --git a/src/afterglow.js b/src/afterglow.js
@@ -15,12 +15,16 @@ afterglow = {
 
 		// Get players including sublime fallback
 		var players = $dom.get("video.afterglow").concat($dom.get("video.sublime"));
+
+		// Get lightboxplayers including sublime fallback
+		var lightboxplayers = $dom.get("a.afterglow").concat($dom.get("a.sublime"));
+
+		// Initialize players
 		for (var i = 0; i < players.length; i++){
 			this.initPlayer(players[i]);
 		}
 
-		// Get players to open in a lightbox including sublime fallback
-		var lightboxplayers = $dom.get("a.afterglow").concat($dom.get("a.sublime"));
+		// Initialize players launching in a lightbox
 		for (var i = 0; i < lightboxplayers.length; i++){
 			this.initLightboxPlayer(lightboxplayers[i]);
 		}
@@ -86,7 +90,7 @@ afterglow = {
 	initLightboxPlayer : function(linkel){
 		// Get the playerid
 		var playerid = linkel.getAttribute("href");
-
+		
 		// Hide the video element
 		var videoel = $dom.get(playerid)[0];
 		$dom.addClass(videoel, "afterglow-lightboxplayer");
@@ -183,8 +187,17 @@ afterglow = {
 			if(/iPad|iPhone|iPod/.test(navigator.platform)){
 				$dom.addClass(videoel, "vjs-iOS");
 			}
+
+			// Check for IE9 - IE11
+			if(ie >= 8 && ie <= 11){ // @see afterglow-lib.js
+				$dom.addClass(videoel, "vjs-using-native-controls");
+			}
+		}
+
+		// Check for IE9 - IE11
+		if(ie >= 8 && ie <= 11){ // @see afterglow-lib.js
+			$dom.addClass(videoel, 'vjs-IE');
 		}
-
 	},
 
 	/**
@@ -338,7 +351,14 @@ afterglow = {
 				"type": "video/youtube",
 				"src": "https://www.youtube.com/watch?v="+videoel.getAttribute("data-youtube-id")
 			}]
-		};
+		};		
+
+		if(ie >= 8 && ie <= 11){
+			ytoptions.youtube = {
+				ytControls : 2,
+				color : "white"
+			}
+		}
 
 		return ytoptions;
 	},

diff --git a/src/lib/afterglow-lib.js b/src/lib/afterglow-lib.js
@@ -39,10 +39,32 @@ function merge_options(obj1,obj2){
     return obj3;
 }
 
+/**
+ * Gets a youtube video thumbnail
+ * @param  {string} id 	The videos youtube id
+ * @return {string} the url to the thumbnail
+ */
 function loadYoutubeThumbnailUrl(id){
-
     var uri = 'https://img.youtube.com/vi/' + id + '/maxresdefault.jpg';
-
     return uri;
+};
+
+
+/**
+ * Sets a variable 'ie' holding the IE version (if IE)
+ */
+var ie = (function(){
+
+    var undef,
+        v = 6,
+        div = document.createElement('div'),
+        all = div.getElementsByTagName('i');
+
+    while (
+        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
+        all[0]
+    );
+
+    return v > 7 ? v : undef;
 
-};
+}());
diff --git a/src/videojs/plugins/Youtube.js b/src/videojs/plugins/Youtube.js
@@ -44,17 +44,6 @@ THE SOFTWARE. */
         var divBlocker = document.createElement('div');
         divBlocker.setAttribute('class', 'vjs-iframe-blocker');
         divBlocker.setAttribute('style', 'position:absolute;top:0;left:0;width:100%;height:100%;display:block');
-
-        // Just for IE10 or older
-        if (document.all) {
-          var iframeBlocker = document.createElement('iframe');
-          iframeBlocker.setAttribute('src',' about:blank');
-          iframeBlocker.setAttribute('class', 'vjs-iframe-blocker');
-          iframeBlocker.setAttribute('style', 'position:absolute;top:0;left:0;width:100%;height:100%;display:block');
-          iframeBlocker.setAttribute('frameborder', '0');
-
-          divWrapper.appendChild(iframeBlocker);
-        }
 
         divWrapper.appendChild(divBlocker);
       }

diff --git a/src/videojs/skin/afterglow/vjs-afterglow.less b/src/videojs/skin/afterglow/vjs-afterglow.less
@@ -191,8 +191,8 @@
 		display: none;
 	}
 
-	/* The control bar shouldn't show after an error */
-	&.vjs-error .vjs-control-bar {
+	/* The control bars shouldn't show after an error */
+	&.vjs-error .vjs-control-bar, &.vjs-error .vjs-top-control-bar {
 		display: none;
 	}
 
@@ -668,6 +668,13 @@
 			margin-top:5px;
 		}
 	}
+	&.vjs-no-flex{
+		// Necessary for IE9
+		.vjs-current-time, .vjs-duration{
+			display:block;
+		}
+	}
+
 	.vjs-current-time{
 		margin-left:30px;
 
@@ -895,7 +902,7 @@
 		}
 	}
 
-	.vjs-error .vjs-big-play-button {
+	&.vjs-error .vjs-big-play-button {
 		display: none;
 	}
 
@@ -907,7 +914,7 @@
 		display: none;
 	}
 
-	.vjs-error .vjs-error-display {
+	&.vjs-error .vjs-error-display {
 		display: block;
 		position: absolute;
 		left: 0;
@@ -917,31 +924,16 @@
 	}
 
 	.vjs-error .vjs-error-display:before {
-		content: 'X';
-		font-family: Arial;
-		font-size: 4em;
-		color: #666666;
-		/* In order to center the play icon vertically we need to set the line height
-		to the same as the button height */
-		line-height: 1;
-		text-shadow: 0.05em 0.05em 0.1em #000;
-		text-align: center /* Needed for IE8 */;
-		vertical-align: middle;
-
-		position: absolute;
-		left: 0;
-		top: 50%;
-		margin-top: -0.5em;
-		width: 100%;
+		content: '';
 	}
 
 	.vjs-error-display div {
 		position: absolute;
-		bottom: 1em;
+		bottom: 40px;
 		right: 0;
 		left: 0;
-
-		font-size: 1.4em;
+		font-family: 'Open Sans', Helvetica light, Helvetica, sans-serif;
+		font-size: 16px;
 		text-align: center;
 		padding: 3px;
 		background: rgb(0, 0, 0); // fallback to just black
@@ -1240,6 +1232,12 @@
 			display:none;
 		}
 
+		&.vjs-IE{
+			iframe{
+				display:block;
+			}
+		}
+
 		&.vjs-has-started{
 			iframe{
 				display:block;