Detect mobile devices and play videos using HTML5

As the Nimbb Player is built on Flash technology, it cannot be used on iOS devices (iPad, iPhone, iPod). A solution to playback Nimbb videos on those mobile devices is to use a HTML5 player. Fortunately, we provide this functionality for our subscribers (Silver and higher).

This example displays a HTML5 video if an iOS device is detected or otherwise displays the Nimbb Player. Try loading this page both from your desktop computer and from your iOS device. You will see that the example works in both cases.

This example requires you to specify your developer key (see tutorial).
A Silver or higher subscription is required.

Example

HTML code

<html>
<body onload="init()">
<script language="JavaScript" type="text/javascript">
<!--

function init()
{
  // Detect the type of device (iOS or desktop).
  if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g))
  {
      // iOS device.
      document.getElementById("div_html5").style.visibility = "visible";
      document.getElementById("div_html5").style.width = 320;
      document.getElementById("div_html5").style.height = 240;
  }
  else
  {
      // Desktop.
      document.getElementById("div_nimbb").style.visibility = "visible";
      document.getElementById("div_nimbb").style.width = 320;
      document.getElementById("div_nimbb").style.height = 240;
  }
}

// -->
</script>
<div style="width:320px;height:240px;">

  <div id="div_html5" style="width:0px;height:0px;visibility:hidden;">
     <video id="html5" width="320" height="240"
     src="http://api.nimbb.com/Live/Play.aspx?guid=XXXXXXXXXX&key=YYYYYYYYYY"
     poster="http://api.nimbb.com/Live/Thumbnail.aspx?guid=XXXXXXXXXX&key=YYYYYYYYYY"
     controls="controls" />
   </div>

   <div id="div_nimbb" style="width:0px;height:0px;visibility:hidden;">
     <object id="nimbb" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="320" height="240" codebase= "http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
     <param name="movie" value="http://player.nimbb.com/nimbb.swf?guid=XXXXXXXXXX&lang=en" />
     <param name="allowScriptAccess" value="always" />
     <embed name="nimbb" src="http://player.nimbb.com/nimbb.swf?guid=XXXXXXXXXX&lang=en" width="320" height="240" allowScriptAccess="always" pluginspage="http://www.adobe.com/go/getflashplayer" type="application/x-shockwave-flash">
     </embed>
     </object>
   </div>

</div>

</body>
</html>

In the code, we are defining an init() function that is called by the onload property once the browser is loading the page. Notice that for the purpose of this example, we have the full page code with the <html> and <body> tags.

In the init() function, we are detect if the browser is on an iPad, iPhone or iPod. On detecting an iOS device, we display the div_html5 div that includes an HTML5 video object tag with id html5. Notice the two parameters: src which is the source of the video and poster which is the preview image. As values to these parameters, we use the Live/Play and Live/Thumbnail functions of the Web Service.

In the case the browser is not on an iOS device, then the Nimbb Player is displayed by making the div_nimbb div visible.

Note: if you are having any issue when running this code on your iOS device, make sure that you have a valid subscription and have recorded the videos on your production site.

View more tutorials.

SIGN UP NOW 7-day free trial

Check out our Developer guide to get started with Nimbb.