10.4. iOS streaming

The Cloud Files CDN allows you to stream video to iOS devices without needing to convert your video. After 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 follows.

  1. CDN-enable your container. For instructions, see the section about CDN-enabling a container in Chapter 9: “API operations for CDN services. Two streaming URIs are created: the container's streaming URI (X-Cdn-Streaming-Uri) and its iOS streaming URI (X-Cdn-Ios-Uri).

  2. Perform a HEAD request against the CDN-enabled container to view these URIs.

  3. Link to your content in a HTML page by using a <video> element.

  4. Set the SRC attribute of the <video> element to the full streaming URI for your container plus the name of your content. In the following example, the streaming video is MobyDick.mp4.

     

    Example 10.5. HTML 5 video element

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

  5. Add JavaScript to the <head> element of your HTML page to check if the user agent is an iOS device. If it is, the JavaScript should use the container's iOS streaming URI (X-Cdn-Ios-Uri) instead of the regular streaming URI. The Cloud Files CDN delivers the properly formatted content for iOS devices only when the iOS streaming URI is used. In the following example, the JavaScript sets the <src> attribute of the <video> element videotag to the iOS Streaming URI. Remember to add your content's name to the end of the iOS streaming URI.

     

    Example 10.6. 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>

  6. Add init() to the <body> element of your HTML page to call the user agent check when the page loads, as shown in the following example.

     

    Example 10.7. Load JavaScript in HTML page

    <body onload=”init()”>

With these pieces of code in place, the proper content streams are set for iOS devices.



loading table of contents...