5.2.7. iOS Streaming

The Cloud Files CDN allows you to stream video to iOS devices without needing to convert your video. Once you CDN-enable your container, you have the tools necessary for streaming media to multiple devices. To leverage this ability, you must check the client's User Agent with JavaScript. An example of the User Agent check and how to use it is given below.

First, CDN-enable your container; Section 5.2.1: “CDN-Enable a Container” for instructions. Two streaming URLs are created: the container's Streaming URL (X-Cdn-Streaming-Uri) and its iOS Streaming URL (X-Cdn-Ios-Uri). Do a HEAD request to the CDN-enabled container to view these URLs.

Second, link to your content in a HTML page using a VIDEO element. Set the SRC attribute of the VIDEO element to the full Streaming URL for your container plus the name of your content. In the below example, the streaming video is MobyDick.mp4.

Example 5.20. HTML 5 Video Element

  <video width=”640” height=”480” id="videotag">
	 <source src=”http://084cc2790632ccee0a12-346eb45fd42c58ca13011d659bfc1ac1.
	 r49.stream.cf0.rackcdn.com/MobyDick.mp4” />
 </video>

Third, add a JavaScript to the HEAD of your HTML page to check if the User Agent is an iOS device. If it is, the JavaScript uses the container's iOS Streaming URL (x-Ios-Uri) instead of the regular Streaming URL. The Cloud Files CDN delivers the properly formatted content for iOS devices only when the iOS Streaming URL is called. Here, the JavaScript sets the SRC attribute of the VIDEO element "videotag" to the iOS Streaming URL. Remember to add your content's name to the end of the URL.

Example 5.21. JavaScript for User Agent Check

<script type=”text/javascript”>

    function isIOS(){
        return ((navigator.userAgent.match(/iPhone/i)) ||(navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/
i))) != null;
    }

    function init(){
        if (isIOS()){
           document.getElementById(“videotag”).src = “http://084cc2790632ccee0a12-346eb45fd42c58ca13011d659bfc1ac1.
           iosr.cf0.rackcdn.com/MobyDick.mp4”;
        }
    }

</script>

Lastly, add init() to the BODY element of your HTML page to call the User Agent check when the page loads.

Example 5.22. Load JavaScript in HTML page

  <body onload=”init()”>

With these pieces of code in place, the proper content streams to your users, no matter their device.

Legal notices