• How to use OpenTelly THEOplayer with Wowza Streaming Engine

    OpenTelly's THEOplayer allows adaptive Apple HLS streaming from Wowza Streaming Engine™ directly to HTML5 platforms without the need of third-party plug-ins such as Flash, Silverlight, or QuickTime to be installed on your device.

    See the THEOPlayer documentation for a list of supported browsers.

    Contents


    Getting started
    Enabling cross-origin resource sharing
    Simple playback example
    Advanced playback example
    Low latency HLS streaming with THEOplayer

    Getting started


    Set up an application for live streaming by following one of our live streaming tutorials. You can also use the vod application that's included with Wowza Streaming Engine and installed and configured as part of the Wowza™ media server installation.

    Enabling cross-origin resource sharing


    Cross-origin resource sharing (CORS) is a content protection mechanism that allows cross-origin requests that would otherwise be forbidden by web browsers. This can happen when a video file is requested from a domain that differs from the server that hosts the video file. Adding the cupertinoUserHTTPHeaders property ensures that requested HLS files have the required CORS headers for domain *. For more information on CORS, see the THEOplayer Cross Origin Resource Sharing documentation.

    Wowza Streaming Engine Manager configuration

    To enable CORS in your live or on-demand application:

    1. In Wowza Streaming Engine Manager, click the Applications tab and then click the name of your application (such as live).

    2. On the application page Properties tab, click Custom in the Quick Links bar.

      Note: Access to the Properties tab is limited to administrators with advanced permissions. For more information, see Manage credentials.
    3. In the Custom area, click Edit.

    4. Click Add Custom Property, specify the following settings in the Add Custom Property dialog box, and then click Add:

      • Path - Select /Root/Application/HTTPStreamer.

      • Name - Enter cupertinoUserHTTPHeaders.

      • Type - Select String.

      • Value - Enter Access-Control-Allow-Origin: *.

    5. Click Save, and then restart the application.

    XML configuration

    To enable CORS in your live or on-demand application:

    1. Use a text editor to open the [install-dir]/conf/[application]/Application.xml file for your live or on-demand application and add the cupertinoUserHTTPHeaders property to the HTTPStreamer/Properties container. Be sure to add it to the correct <Properties> container in Application.xml as there are several such containers in the file.
              <Property>
                  <Name>cupertinoUserHTTPHeaders</Name>
                  <Value>Access-Control-Allow-Origin: *</Value>
              </Property>
    2. Restart the Wowza media server software to apply the changes.

    Simple playback example


    Copy this basic example into your webpage to use THEOPlayer with a live or VOD stream.

    <html lang="en">
        <head>
        </head>
        <body>    
            <video class="video-player" src="http://[wowza-ip-address]:1935/[application]/[stream-name]/playlist.m3u8" preload="none" controls="controls"></video>
    
            <script type="text/javascript" src="//cdn.theoplayer.com/latest/[theoplayer-license]/theoplayer.loader.js"></script>
        </body>
    </html>
    Where:

    • The [wowza-ip-address] placeholder is the IP address of your Wowza media server.

    • The [application] placeholder is the name of your Wowza media server application (such as live or vod).

    • The [stream-name] placeholder is the name of your stream in that application.

      The examples below show possible stream URLs for each type of application:

      VOD


      http://[wowza-ip-address]:1935/vod/mp4:sample.mp4/playlist.m3u8

      Live


      http://[wowza-ip-address]:1935/live/myStream/playlist.m3u8

    Note: [THEOplayer-license] is your THEOplayer license number used to the access the player's JavaScript library.

    Advanced playback example


    Use this advanced THEOPlayer example to change the size of the player and to add a poster image and adaptive playback bitrates. For other advanced configuration options, see OpenTelly's THEOplayer documentation.

    <html lang="en">
        <head>
            <title>THEOplayer HLS demo</title>
            <style>
            .video-player {
                width: 852px;
                height: 480px;
            }
            </style>
        </head>
        <body>    	
           <script type="text/javascript" src="//cdn.theoplayer.com/latest/[theoplayer-license]/theoplayer.loader.js"></script>
    		
      	   <script>
                     theoplayer.onReady = function () {		
    	         var conf1	= {
                           configuration : { }
                      }      		
    		 var player;		
    		 var video = document.createElement('video');
    		 video.controls = 'controls';
    		 video.src = 'http://[wowza-ip-address]/[application]/[stream-name]';
    		 video.className = 'video-player';
    		 video.poster = '[poster-image-URL]';
    		 video.preload = 'none';
    		
                     document.body.appendChild(video);
    		
    		 player = theoplayer(video,conf1);
    	        };
              </script>		
        </body>
    </html>
    Where the [poster-image-URL] placeholder is the location of the poster image to appear in the player before the stream begins.

    Low latency HLS streaming with THEOplayer


    The method for achieving a low-latency HLS stream with THEOplayer depends on the goals of your broadcast and the latency you're trying to achieve.

    If you want to reduce live stream latency to 5-10 seconds, set the packet's target chunk duration by adding the cupertinoChunkDurationTarget property to your application configuration. For more information on configuring this property, see How to configure Apple HTTP Live Streaming packetization.

    If you want to reduce live stream latency to under 5 seconds, contact OpenTelly to design a custom player solution.


    Originally Published: For Wowza Streaming Engine on 05-06-2015.
    Updated: 06-30-2015.

    If you're having problems or want to discuss this article, post in our forum.