Changed the flash fallback creation mechanism to work with IE

wet-boew · Jul 25, 2012 · fd05227 · fd05227
1 parent 66eaefe
commit fd05227
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 31 deletions.
diff --git a/build/js/pe-ap-min.js b/build/js/pe-ap-min.js
diff --git a/src/js/workers/multimedia.js b/src/js/workers/multimedia.js
@@ -38,23 +38,15 @@
 				media = elm.children("audio, video").eq(0),
 				media_id,
 				flash = true,
-				fbVideoType = "video/mp4",
-				fbAudioType = "audio/mpeg",
 				$fbObject,
-				$fbVars,
-				evtmgr; //MP3
-
-			/*opts = {
-				// This is an example from tabbedinterface, to show how to pass configuration parameters from the html element to the plugin.
-				// There are some simple examples here, along with some more complicated ones.
-				defaultElm: ((elm.find(".default").length) ? ".default" : "li:first-child"),
-				autoHeight: (elm.hasClass("auto-height-none") ? false : true),
-				cycle: (elm.hasClass("cycle-slow") ? 8000 : (elm.hasClass("cycle-fast") ? 2000 : (elm.hasClass("cycle") ? 6000 : false))),
-				carousel: (/style-carousel/i.test(elm.attr('class'))) ? true : false,
-				autoPlay: (elm.hasClass("auto-play") ? true : false),
-				animate: (elm.hasClass("animate") || elm.hasClass("animate-slow") || elm.hasClass("animate-fast") ? true : false),
-				animationSpeed: (elm.hasClass("animate-slow") ? "slow" : (elm.hasClass("animate-fast") ? "fast" : "normal"))
-			};*/
+				fbVideoType = "video/mp4",
+				fbAudioType = "audio/mpeg", //MP3
+				fbBin = _pe.add.liblocation + "bin/multimedia.swf",
+				fbClass,
+				fbWidth,
+				fbHeight,
+				fbVars,
+				evtmgr;
 
 			//Add an id if an id is missing
 			if (elm.attr("id") !== undefined) {
@@ -75,27 +67,26 @@
 			} else {
 				//No nativly supported format provided, trying Flash fallback
 				//TODO:Add Flash detection
-				$fbObject = $("<object id=\"" + media_id + "\" type=\"application/x-shockwave-flash\" data=\"" + _pe.add.liblocation + "bin/multimedia.swf\" tabindex=\"-1\"></object>");
-				$fbVars = $("<param name=\"flashvars\" value=\"id=" + elm.attr("id") + "\"/>");
-
-				$fbObject.append($fbVars);
+				fbVars = "id=" + elm.attr("id");
 				if (flash && media.is("video") && media.find("source[type=\"" + fbVideoType + "\"]")) {
-					$fbObject.addClass("video");
-					$fbObject.attr("width", media.width()).attr("height", media.height());
-					$fbObject.append("<param value=\"always\" name=\"allowScriptAccess\"><param value=\"#000000\" name=\"bgcolor\"><param value=\"opaque\" name=\"wmode\">");
-					$fbVars.attr("value", $fbVars.attr("value") + "&height=" + media.height() + "&width=" + media.width() + "&posterimg=" + escape(_pe.url(media.attr("poster")).source) + "&media=" + _pe.url(media.find("source[type=\"" + fbVideoType + "\"]").attr("src")).source);
+					fbClass = "video";
+					fbWidth = media.width() > 0 ? media.width() : media.attr("width");
+					fbHeight = media.height() > 0 ? media.height() : media.attr("height");
+					fbVars +=  "&height=" + media.height() + "&width=" + media.width() + "&posterimg=" + escape(_pe.url(media.attr("poster")).source) + "&media=" + _pe.url(media.find("source[type=\"" + fbVideoType + "\"]").attr("src")).source;
 					canPlay = true;
 				} else if (flash && media.is("audio") && media.find("source[type=\"" + fbAudioType + "\"]")) {
-					$fbObject.addClass("audio");
-					$fbVars.attr("value", $fbVars.attr("value") + "&media=" + _pe.url(media.find("source[type=\"" + fbAudioType + "\"]").attr("src")).source);
-					$fbObject.append($fbVars);
+					fbClass = "audio";
+					fbWidth = 0;
+					fbHeight = 0;
+					fbVars += "&media=" + _pe.url(media.find("source[type=\"" + fbAudioType + "\"]").attr("src")).source;
 					canPlay = true;
 				} else {
 					//TODO: Display when no HTML5 video or Flash
 					canPlay = false;
 				}
 				//Can play using a fallback
 				if (canPlay) {
+					$fbObject = $("<object id=\"" + media_id + "\" width=\"" + fbWidth + "\" height=\"" + fbHeight + "\" class=\"" + fbClass + "\" type=\"application/x-shockwave-flash\" data=\"" + fbBin + "\" tabindex=\"-1\"><param name=\"movie\" value=\"" + fbBin + "\"/><param name=\"flashvars\" value=\"" + fbVars + "\"/><param name=\"allowScriptAccess\" value=\"always\"/><param name=\"bgcolor\" value=\"#000000\"/><param name=\"wmode\" value=\"opaque\"/>");
 					media.before($fbObject);
 					media.remove();
 					media = $fbObject;

diff --git a/test/multimedia-eng.html b/test/multimedia-eng.html
@@ -22,17 +22,19 @@
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 
 <script src="../build/js/jquery.min.js"></script>
-<link rel="stylesheet" href="../build/grids/css/util-min.css" />
 <!--[if lte IE 8]>
+<script src="../build/js/polyfills/html5shiv-min.js"></script>
+<link rel="stylesheet" href="../build/grids/css/util-ie-min.css" />
 <link rel="stylesheet" href="../build/js/css/pe-ap-ie-min.css" />
 <link rel="stylesheet" href="../build/theme-gcwu-fegc/css/theme-ie-min.css" />
 <![endif]-->
 <!--[if gt IE 8]><!-->
+<link rel="stylesheet" href="../build/grids/css/util-min.css" />
 <link rel="stylesheet" href="../build/js/css/pe-ap-min.css" />
-<link rel="stylesheet" href="../build/theme-gcwu-fegc/css/theme-min.css" id="wb-theme" />
+<link rel="stylesheet" href="../build/theme-gcwu-fegc/css/theme-min.css" />
 <!--<![endif]-->
 
-<!-- CustomScriptsCSSStart -->
+<!-- CustomScriptsCSSStart --><script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
 <!-- CustomScriptsCSSEnd -->
 </head>