/** * StarzVideoPlayer 1.0 * (c) 2011 Starz Entertainment, LLC * http://www.starz.com * * sogden 9-28-11 patch26 * * DESCRIPTION: Generates either the flash or html5 Starz video player experience based on playerType ( single | multi | extras | embedded | mm ) * * -> Initially shows an image or slideshow of images along with simple metaData * -> Allows the user to 'watch preview' which launches a video experience * -> Allows the user to view 'more info' which forces the browser to a new url * * REQUIRES: innerXHTML.js * prototype.js * moo.fx.js * swfobject.js * swfaddress.js * * USAGE: new StarzVideoPlayer( aWidth, // String: the width of the video player in px aHeight, // String: the height of the video player in px aPlayerType, // String: the type of player to use : single | multi | extras aPlayerData, // String: the player data xml aConfigFile, // String: the path to the configuration file aPageName, // String: the name of the internal starz.com page -- used for omniture tracking aTargetDivID, // String: the ID of the

element the video player is written into aTargetFallbackDivID, // String: the ID of the

element which displays if flash/html5 is not available aForceHTML5, // Boolean: (optional) used to force the player to only render in html5 mode aMediaServerURL, // String: (optional) used to switch the player to an alternate mediaServerURL default is rtmp://video.starz.com/ondemand/ ); * * RETURNS: The instance of the new StarzVideoPlayer class * NOTES: This file can be used with basic HTML markup... * * 1) Include the starzVideoPlayer.js file in the element * 2) Create the necessary placeholders in the element as

tags * One

will hold the actual video element, while the other will hold the 'fallback' image if the browser does not support flash or html5

* 3) Make a new starz video player using javascript! */ //alert('BEGIN starzVideoPlayer'); //console.log('BEGIN starzVideoPlayer'); //====================== // Stylesheet //====================== // this line includes the styleSheet needed for the html5 implementation document.write(''); //====================== // StarzVideoPlayer //====================== StarzVideoPlayer = Class.create({ width: String, // in pixels, the width of the player height: String, // in pixels, the height of the player playerType: String, playerData: String, // XML configFile: String, // path to the configuration xml pageName: String, // used for omniture tracking targetDivID: String, targetFallbackDivID: String, forceHTML5: Boolean, mediaServerURL: String, configFileXML: Object, // the actual xml that gets loaded for the html5 implementation titles: Array, slides: Array, relatedTitles: Array, relatedSlides: Array, currentSlide: String, currentIndex: Number, currentImage: Image, titleName: String, description: String, pageURL: String, imageLinkUrl:String, imageLinkTarget:String, videoSource: String, isShowingVideo: Boolean, isAutoCycle: Boolean, autoTimerDelay: Number, autoTimerID: Number, // DEBUG logging: Boolean, forceNoFlash: Boolean, forceIpad: Boolean, //====================== // Constructor //====================== initialize: function (aWidth, aHeight, aPlayerType, aPlayerData, aConfigFile, aPageName, aTargetDivID, aTargetFallbackDivID, aForceHTML5, aMediaServerURL ) { //====================== // Properties //====================== // do null checks -> set up defaults if (!aWidth || aWidth == "") { aWidth = "685"; } if (!aHeight || aHeight == "") { aHeight = "385"; } if (!aPlayerType || aPlayerType == "") { aHeight = "single"; } // todo: default starz image! if (!aPlayerData || aPlayerData == "") { aPlayerData = "noData"; } if (!aConfigFile) { aConfigFile = ""; } if (!aPageName) { aPageName = ""; } // todo: manually inject a targetDiv/fallbackDiv if not supplied? if (!aTargetDivID || aTargetDivID == "") { //aTargetDivID = document.createElement('div'); //$(aTargetDivID).innerHTML = '

'; } if (!aTargetFallbackDivID || aTargetFallbackDivID == "") { //aTargetFallbackDivID = document.createElement('div'); //$(aTargetFallbackDivID).innerHTML = ''; } if (!aForceHTML5) { aForceHTML5 = false; } if (!aMediaServerURL || aMediaServerURL == "") { aMediaServerURL = "rtmp://video.starz.com/ondemand/"; } this.width = aWidth; this.height = aHeight; this.playerType = aPlayerType; this.playerData = aPlayerData; this.configFile = aConfigFile; this.pageName = aPageName; this.targetDivID = aTargetDivID; this.targetFallbackDivID = aTargetFallbackDivID; this.forceHTML5 = aForceHTML5; this.mediaServerURL = aMediaServerURL; this.logging = false; this.forceNoFlash = false; this.forceIpad = false; this.autoTimerDelay = 6000; // milli-vanilli seconds this.fadeInDuration = 1000; this.fadeOutDuration = 333; this.currentIndex = -1; this.isAutoCycle = true; //====================== // DEBUGGIN setups //====================== // this.logging = true; // NOTE: ie doesn't have a built-in console logger! if ((this.logging == true) && (typeof (console) == "undefined")) { this.logging = false; } //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // force the iPad experience //this.forceIpad = true; this.logging = true; this.forceHTML5 = this.forceIpad; //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ // force the 'no flash' experience //this.forceNoFlash = true; this.logging = false; this.forceHTML5 = false; this.forceIpad = false; //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ //====================== // Go! //====================== this.showFlashVideoPlayer(); }, //====================== // Methods //====================== /*** * Shows the flash video player and defaults to the HTML5 video player if needed * if neither browser component is available, the default 'get flash' message is displayed */ showFlashVideoPlayer: function () { // we can choose to go directly into HTML5 mode if specified, or if flash is not available, or if we are forcing iPad debuggin var skipFlash = (this.forceNoFlash) ? true : this.forceHTML5; //if (this.logging) console.log('showFlashVideoPlayer'); var requiredFlashVersion = "10.0.2"; if (typeof (swfobject) == "undefined") { // i have no idea why this didn't load, // but SWFObject isn't available so skip flash and try html5 instead // iPad skipFlash = true; } if (!swfobject.hasFlashPlayerVersion(requiredFlashVersion)) { skipFlash = true; } if (skipFlash != true) { var flashvars = { playerType: this.playerType, playerData: encodeURIComponent(this.playerData), playerConfig: this.configFile, pageName: this.pageName, mediaServerURL: this.mediaServerURL }; var params = { allowFullScreen: "true", allowScriptAccess: "sameDomain", menu: "false", wmode: "transparent", swLiveConnect: "true" }; var atts = {}; var swfURL = "/SwfLib/StarzVideoPlayer.swf"; if (this.logging) console.log('showFlashVideoPlayer.embedSWF: ' + swfURL, this.targetDivID); swfobject.embedSWF(swfURL, this.targetDivID, this.width, this.height, requiredFlashVersion, false, flashvars, params, atts); } else { // if this is the iPad, we will show the javascript slideshow, // otherwise, we will show the 'missing flash' image and only the first image of the slideshow if (this.isIPad()) { this.showHtmlSlideshow(); } else { //alert('you are missing flash!'); jQuery("#" + this.targetFallbackDivID).show(); } } }, /*** * Loads the configuration file from the player async * Renders the HTML version of the slideshow to the targetDivID */ showHtmlSlideshow: function () { if (typeof this.configFile != "undefined" && this.configFile != "") { this.loadConfigFile(); } else { this.createHtmlSlideshow(); } }, /*** * Loads the XML configuration file supplied as an async Ajax request */ loadConfigFile: function () { if (this.logging) console.log("loadConfigFile: " + this.configFile); // make the ajax request to the XML configuration file new Ajax.Request(this.configFile, { method: 'get', contentType: 'application/xml', onSuccess: this.configFileLoaded.bind(this), onFailure: this.configFileError.bind(this) }); }, /*** * Gets a configuration value from either the XML configuration file or the default values */ getConfigValue: function (aConfigNodeName) { if (this.configFile == "") { return this.getDefaultConfig(aConfigNodeName); } else { var tArray = $(this.configFileXML).getElementsByTagName(aConfigNodeName); if (tArray.length > 0) { if( tArray[0].childNodes.length > 0 ) { return tArray[0].childNodes[0].nodeValue.strip(); } else { // the config file does not contain this value return this.getDefaultConfig(aConfigNodeName); } } else { return this.getDefaultConfig(aConfigNodeName); } } }, /*** * Gets a configuration value from either the XML configuration file or the default values */ getConfigValueAsBoolean: function (aConfigNodeName) { var tBool = this.getConfigValue(aConfigNodeName); if (tBool.toLowerCase() == "true") return true; return false; }, /*** * Returns a default value based on the configuration node name requested from the GUI * @see Starz.Flash.VideoPlayers\trunk\source\classes\as3\com\starz\video\util\ConfigUtil.as */ getDefaultConfig: function (aConfigNodeName) { var tStr = ""; switch (aConfigNodeName) { case "themeColor": tStr = "f47920"; break; case "itemNavColor": tStr = "ffffff"; break; case "itemNavSelectedColor": tStr = "f47920"; break; case "itemCaptionTitleTextColor": tStr = "000000"; break; case "itemCaptionDescriptionTextColor": tStr = "000000"; break; case "itemCaptionDescriptionBgColor": tStr = "ffffff"; break; case "itemCaptionDescriptionBgAlpha": tStr = ".70"; break; case "itemCaptionButtonTextFont": tStr = "Arial"; break; case "itemCaptionButtonTextColor": tStr = "000000"; break; case "itemCaptionButtonTextSize": tStr = "12"; break; case "itemCaptionButtonTextBold": tStr = "true"; break; case "videoOverlayPath": tStr = "/SiteImagesLib/PlayerExtras_Overlay.gif"; // just transparent break; default: if (this.logging) console.log("TODO: Create default style for -> " + aConfigNodeName); break; } return tStr; }, /*** * Either displays a single image or creates the image slideshow from the faustData based on playerType */ createHtmlSlideshow: function () { //if (this.logging) console.log("createHtmlSlideshow"); //if( this.logging ) console.log( "decoding playerData: " + this.playerData ); // except for the homepage, the faustData must be decoded before we deal with it.. this.playerData = decodeURIComponent(this.playerData); // a javascript string and not an HTML object... var tDiv; if (typeof this.playerData == "string") { tDiv = document.createElement('div'); $(tDiv).innerHTML = this.playerData; } else { tDiv = this.playerData; } this.playerData = tDiv; this.titles = $(tDiv).getElementsBySelector("slides"); // note: the extras player has no 'slides' only a playlist of videos... until the iPad can play the videos we opt to just display the default overlay image if (this.playerType.toLowerCase() == "extras") { var tVideoOverlay = this.getConfigValue("videoOverlayPath"); this.titles[0].innerHTML = ""; } if (this.titles.length > 0) this.slides = this.titles[0].getElementsBySelector("slide"); this.relatedTitles = $(tDiv).getElementsBySelector("related"); if (this.relatedTitles.length > 0) this.relatedSlides = this.relatedTitles[0].getElementsBySelector("video"); //if (this.logging) console.log(this.titles); //if( this.logging ) console.log( this.slides ); //if (this.logging) console.log(this.relatedTitles); //if( this.logging ) console.log( this.relatedSlides ); this.filterSlides(); this.showNextSlide(); }, /*** * Filters out all non-standard images from the slides array * Currently, this means no SWFs ! */ filterSlides: function () { //if (this.logging) console.log("filterSlides: " + this.slides.length); for (var i = 0; i < this.slides.length; i++) { // REPLACE SWFS WITH JPGS var tImgSrc = this.slides[i].readAttribute('src'); if (tImgSrc.indexOf(".swf") != -1) { tImgSrc = tImgSrc.split(".swf").join(".jpg"); this.slides[i].writeAttribute('src',tImgSrc); } /* // REMOVE SWFS // right now, just remove any swf reference if (tImgSrc.indexOf(".swf") != -1) { if (this.logging) console.log("REMOVED: " + tImgSrc); this.slides.splice(i, 1); i--; // props to sagar for thinking of this! // splice is actively cutting the length down, so we will skip an element if we don't go back one index each time we splice one from the array } */ } if (this.slides.length <= 1) this.isAutoCycle = false; //if (this.logging) console.log("autoCycle: " + this.isAutoCycle); }, /*** * Removes the slide at a particular index in the slides array */ removeSlideAtIndex: function (aSlideIndex) { if (this.logging) console.log("removeSlideAtIndex: " + aSlideIndex); // ensure the index exists in the bounds of the array if( aSlideIndex <= -1 ) return; if( aSlideIndex > this.slides.length ) return; this.slides.splice(aSlideIndex, 1); }, /*** * Steps the currentIndex and shows the next slide in the slides array * If aStopImageCycle is true, the autoCycle feature is turned off and the user must click a chicklet to load the next image */ showNextSlide: function (aStopImageCycle) { if (aStopImageCycle == true) { this.isAutoCycle = false; } if (this.isShowingVideo == true) return; // fade the last slide out... wait //setTimeout(this.fadeImageOut.bind(this), 1); //setTimeout(this.resumeShowNextSlide.bind(this), this.fadeOutDuration + 1); this.resumeShowNextSlide(); }, /*** * Steps the currentIndex and shows the next slide in the slides array * If aStopImageCycle is true, the autoCycle feature is turned off and the user must click a chicklet to load the next image */ resumeShowNextSlide: function () { try { // step the index and ensure we haven't hit the end... this.currentIndex++; if (this.currentIndex >= this.slides.length) this.currentIndex = 0; if (this.logging) console.log('showNextSlide: ' + (this.currentIndex+1) + "/" + this.slides.length); this.currentSlide = this.slides[this.currentIndex]; var tImageSrc = $(this.currentSlide).readAttribute('src'); this.titleName = $(this.currentSlide).readAttribute('title'); if (this.titleName == null) this.titleName = ""; this.description = $(this.currentSlide).readAttribute('description'); if (this.description == null) this.description = ""; this.pageURL = $(this.currentSlide).readAttribute('link'); if (this.pageURL == null) this.pageURL = ""; this.imageLinkUrl = $(this.currentSlide).readAttribute('imageLinkUrl'); if (this.imageLinkUrl == null) this.imageLinkUrl = ""; this.imageLinkTarget = $(this.currentSlide).readAttribute('imageLinkTarget'); if (this.imageLinkTarget == null) this.imageLinkTarget = ""; var tWatchPreviewHTML = this.getWatchPreviewHTML(); var tMoreInfoHTML = this.getMoreInfoHTML(); var itemCaptionTitleTextColor = this.getConfigValue("itemCaptionTitleTextColor"); var itemCaptionDescriptionTextColor = this.getConfigValue("itemCaptionDescriptionTextColor"); var itemCaptionDescriptionBgColor = this.getConfigValue("itemCaptionDescriptionBgColor"); var itemCaptionDescriptionBgAlpha = this.getConfigValue("itemCaptionDescriptionBgAlpha"); var tTextHTML = ""; var needsOverlay = true; if (this.titleName != "" || this.description != "" || tMoreInfoHTML != "") { needsOverlay = true; } // CMS will enter " " to defer the creation of the background if( (this.titleName == " " && this.description == "") || (this.titleName == "" && this.description == "") ) { needsOverlay = false; } if (needsOverlay) { tTextHTML = "

" + "

" + this.titleName + "

" + "

" + this.description + "

" + tWatchPreviewHTML + ((tMoreInfoHTML != "") ? tMoreInfoHTML : "
") + "

"; } var tHTML = "

" + this.getSlideImageHTML(tImageSrc,this.imageLinkUrl,this.imageLinkTarget) + tTextHTML + this.getSlideNavigationHTML() + "

"; $(this.targetDivID).setStyle({ display: 'block' }); //$('slideShowOverlayBackgroundMulti').setOpacity(0); $(this.targetDivID).innerHTML = tHTML; // if any buttons exist, observe the clicks! var tSlideNavigationItems = $(this.targetDivID).getElementsByClassName("slideShowOverlayNavigationItem"); if (tSlideNavigationItems.length) { for (var i = 0; i < tSlideNavigationItems.length; i++) { tSlideNavigationItems[i].observe('click', this.showSlideAtID.bindAsEventListener(this, i)); } } // commenting this out until we get iPad videos playing /* var tWatchPreviewButton = $(this.targetDivID).getElementsByClassName("slideShowOverlayButtonWatchPreview"); if (tWatchPreviewButton[0]) tWatchPreviewButton[0].observe('click', this.showHtmlVideo.bind(this)); */ var tMoreInfoButton = $(this.targetDivID).getElementsByClassName("slideShowOverlayButtonMoreInfo"); if (tMoreInfoButton[0]) tMoreInfoButton[0].observe('click', this.showInfo.bind(this)); } catch (e) { //this.showNextSlide(true); this.showNextSlide(false); } }, /*** * Gets the HTML for the 'chicklet' images with the correct configuration colors */ getSlideNavigationHTML: function () { var tHTML = ""; if (this.slides.length <= 1) return tHTML; var itemNavColor = this.getConfigValue("itemNavColor"); var itemNavSelectedColor = this.getConfigValue("itemNavSelectedColor"); for (var i = 0; i < this.slides.length; i++) { tHTML += (i != this.currentIndex) ? "

" : "

"; } return "

" + tHTML + "

"; }, /*** * Gets the HTML for the slide image to display based on a source url */ getSlideImageHTML: function (aImageSrc,aImageLinkUrl,aImageLinkTarget) { this.currentImage = new Image(); this.currentImage.src = aImageSrc; this.currentImage.width = this.width; this.currentImage.height = this.height; //if( this.logging ) console.log( "imageHTML: " + aImageSrc + " -- " + this.width + "x" + this.height ); //$(this.currentImage).setOpacity(0); // let the image fade in later?... see @fadeImageIn //if( this.logging ) console.log('getSlideImageHTML :: ' + aImageSrc + '\r\nautoCycle: ' + this.isAutoCycle); if (this.isAutoCycle == true) { $(this.currentImage).observe('load', this.slideLoaded.bind(this)); $(this.currentImage).observe('error', this.slideError.bind(this)); } var tHtml = this.currentImage.outerHTML; if( aImageLinkUrl != "" ) tHtml = "" + tHtml + ""; return tHtml; }, /*** * Gets the HTML for the 'watch preview' button * IF no source exists, an empty string is returned */ getWatchPreviewHTML: function () { return ""; //if (!this.pageURL) return ""; /* var itemCaptionButtonTextFont = this.getConfigValue("itemCaptionButtonTextFont"); var itemCaptionButtonTextColor = this.getConfigValue("itemCaptionButtonTextColor"); var itemCaptionButtonTextSize = this.getConfigValue("itemCaptionButtonTextSize"); var itemCaptionButtonTextBold = this.getConfigValueAsBoolean("itemCaptionButtonTextBold"); var tHtml = "

WATCH PREVIEW

"; return tHtml; */ }, /*** * Gets the HTML for the 'more info' button */ getMoreInfoHTML: function () { //if (this.logging) console.log("getMoreInfoHTML? " + this.pageURL); if (!this.pageURL) return ""; var itemCaptionButtonTextFont = this.getConfigValue("itemCaptionButtonTextFont"); var itemCaptionButtonTextColor = this.getConfigValue("itemCaptionButtonTextColor"); var itemCaptionButtonTextSize = this.getConfigValue("itemCaptionButtonTextSize"); var itemCaptionButtonTextBold = this.getConfigValueAsBoolean("itemCaptionButtonTextBold"); var tHtml = "

MORE INFO

"; return tHtml; }, /*** * Creates the HTML5