Detect Flash and Workaround – Zmags Publicator Community

Sometimes, when using one of our Flash viewers (Standard or Verge), it may be the case that your reader does not have Adobe Flash Player installed. By default, it will suggest that they install it, but in some cases you may wish to take a different approach.

The below workaround uses the embedded viewer API and a Preferred Viewer custom channel to detect when Flash is not installed, and switch to an HTML5 Viewer instead.

Video Demonstration

In this video, the viewer is first loaded in Flash. Then, the web browser's Flash plugin is disabled, to simulate a computer that does not have Flash installed. Upon reloading, the viewer is instead loaded in HTML5.

Code and Usage Instructions
If you would like to implement this workaround yourself, here is the code you'll need:

<!DOCTYPE html>
<html>
<head>
	<title>YOUR TITLE HERE</title>

	<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
	<script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
	<script>
		// Start setting up the Zmags viewer.
		var viewer = new com.zmags.api.Viewer();
		viewer.setPublicationID("PUB_ID_HERE");
	
		// If Flash is not installed, apply the Preferred Viewer context to switch us to HTML5.
		if(!swfobject.hasFlashPlayerVersion("10")){
			 viewer.addContext(com.zmags.api.Viewer.Context.CUSTOM_CHANNEL, "no_flash");
		}
		
		// Finish setting up the Zmags viewer.
		viewer.setParentElementID("myViewerContent");
		viewer.show();
	</script>
</head>
<body>
	<div id="myViewerContent" style="position:absolute; top:0px; left:0px; height:100%; width:100%;"></div>
</body>
</html>

To use, simply copy the above HTML code into a page on your organization's website. Be sure to fill in your desired title and the ID of your publication (found by clicking the publication's name in the "All Publication" list of your Zmags Publicator account).

Additionally, you will need to set up a custom channel for the publication using the following settings:

Context Name: no_flash
Device: Desktop
Channel: Custom
Custom Channel: no_flash
Viewer: <any HTML5 viewer of your choosing>