Use OpenTelly THEOplayer with Wowza Streaming Engine

OpenTelly's THEOplayer allows adaptive Apple HLS streaming from Wowza Streaming Engine™ media server software 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 in Wowza Streaming Engine Manager. You can also use the vod application that's included with Wowza Streaming Engine and installed and configured as part of the Wowza Streaming Engine 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.

To enable CORS in your Wowza Streaming Engine 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.
Alternatively, you can enable CORS in your live or on-demand application's Application.xml file:
 
  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 Wowza Streaming Engine.

Simple playback example


Copy this 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 Streaming Engine server.
     
  • The [application] placeholder is the name of your Wowza Streaming Engine 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 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 to 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.