The HTML5 Web SDK by THEOplayer allows live and on-demand HLS and MPEG-DASH streaming from Wowza Streaming Engine™ media server software directly to HTML5 platforms without the need for third-party plug-ins. Although THEOplayer offers enterprise and pay-as-you-go plans, this article provides instructions for using the pay-as-you-go option. For a list of supported browsers, see the THEOPlayer technical specifications.
Note: In Wowza Streaming Engine 4.5.0 and later, cross-origin resource sharing (CORS) is enabled by default. CORS is a content protection mechanism that allows cross-origin requests that would otherwise be forbidden by web browsers. For earlier versions of Wowza Streaming Engine, see Enable cross-origin resource sharing in Wowza Streaming Engine for more information.
Set up the player with THEOplayer
Configure an HTML5 player using the THEOplayer portal.
- Go to the THEOplayer portal, and sign in or create a new account and activate it.
- After you've signed into an activated account, in the SDKs panel, click Create.
- Select HTML5, and enter a descriptive Name for your player.
- Select player configuration settings, as needed.
- In the Formats section, MPEG-DASH and HLS streaming are enabled by default. Select a media stream type to determine which type of stream you're making available, and enter a Wowza Streaming Engine HLS or MPEG-DASH playback URL. Progressive (.mp4) is not supported.
For example, your live HLS URL may look something like this:
http://[address]:1935/myApplication/myStream/playlist.m3u8
Your VOD HLS URL may look something like this:
http://[address]:1935/myApplication/mp4:sample.mp4/manifest.mpd
For more example URLs, see the Playback URL formats section in About playing Wowza Streaming Engine streams.
- Click Next.
- Optionally, add Whitelist domains to restrict stream playback to specific domains.
- Click Publish, and when the player is ready, click the Play button to preview playback.
- If needed, click Configure or Customize to edit the player configuration settings.
Embed the player into an HTML page
In the THEOportal, click How to embed my THEOplayer HTML5 SDK, and follow the step-by-step or full sample page instructions. The embed code in the example is custom generated for your player application.
Your example HTML code will look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>THEOplayer 2.X: Getting Started</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Chromecast SDK -->
<script type="text/javascript" src="//www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1"></script>
<!-- THEOplayer library and css -->
<script type="text/javascript" src="https://cdn.myth.theoplayer.com/abcd6b11-4799-4eaa-8085-61416522f67f/THEOplayer.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.myth.theoplayer.com/abcd6b11-4799-4eaa-8085-61416522f67f/ui.css" />
</head>
<body>
<div class="theoplayer-container video-js theoplayer-skin vjs-16-9"></div>
<script>
var element = document.querySelector(".theoplayer-container");
var player = new THEOplayer.Player(element, {
libraryLocation: "https://cdn.myth.theoplayer.com/abcd6b11-4799-4eaa-8085-61416522f67f"
});
// OPTIONAL CONFIGURATION
// Customized video player parameters
player.source = {
sources: [{
"src": "http://[address]:1935/myApplication/myStream/playlist.m3u8",
"type": "application/x-mpegurl"
}],
// Advertisement configuration
ads: [{
"sources": "//cdn.theoplayer.com/demos/preroll.xml",
"timeOffset": "start",
"skipOffset": 2
}]
};
player.preload = 'auto';
// Related content configuration
player.related.sources = [{
"image": "//cdn.theoplayer.com/video/big_buck_bunny/poster.jpg",
"title": "Big buck bunny",
"duration": "9:57",
"source": {
"sources": [{
"src": "//cdn.theoplayer.com/video/big_buck_bunny/big_buck_bunny.m3u8",
"type": "application/x-mpegurl"
}]
}
}, {
"image": "//cdn2.hubspot.net/hubfs/2163521/Demo_zone/CaminandesLlamaDramaPoster.jpg",
"title": "4K Streaming with THEOplayer",
"duration": "1:30",
"source": {
"sources": [{
"src": "//amssamples.streaming.mediaservices.windows.net/634cd01c-6822-4630-8444-8dd6279f94c6/CaminandesLlamaDrama4K.ism/manifest(format=m3u8-aapl)",
"type": "application/x-mpegurl"
}]
}
}, {
"image": "//cdn.theoplayer.com/video/sintel/poster.jpg",
"title": "Sintel",
"duration": "14:47",
"source": {
"sources": [{
"src": "https://cdn.theoplayer.com/video/sintel/nosubs.m3u8",
"type": "application/x-mpegurl"
}]
}
}, {
"image": "//cdn2.hubspot.net/hubfs/2163521/Demo_zone/tears_of_steel_poster.jpg",
"title": "Tears of steel",
"duration": "14:47",
"source": {
"sources": [{
"src": "https://cdn.theoplayer.com/video/elephants-dream/playlist-single-audio.m3u8",
"type": "application/x-mpegurl"
}]
}
}];
// Up next configuration
player.upnext.bar.offset = 100;
player.upnext.source = {
"image": "//cdn.theoplayer.com/video/big_buck_bunny/poster.jpg",
"title": "Big buck bunny",
"duration": "9:57",
"link": "#"
};
// Social configuration
player.social.url = "http://demo.theoplayer.com/social-sharing";
player.social.items = [{
"label": "Facebook",
"icon": "https://en.facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png",
"src": "http://www.facebook.com/sharer/sharer.php?u=<URL>"
}, {
"label": "Twitter",
"icon": "https://s-media-cache-ak0.pinimg.com/originals/f3/6f/51/f36f511b261596a2debe85d844bb1b87.png",
"src": "http://twitter.com/intent/tweet?url=<URL>"
}, {
"label": "Reddit",
"icon": "https://vignette3.wikia.nocookie.net/hayday/images/1/10/Reddit.png/revision/latest?cb=20160713122603",
"src": "http://www.reddit.com/submit?url=<URL>"
}, {
"label": "Direct link",
"src": "http://demo.theoplayer.com/social-sharing"
}, {
"label": "Embed",
"text": "<iframe width=\"640\" height=\"360\" src=\"http://demo.theoplayer.com/social-sharing\" frameborder=\"0\" allowfullscreen>\n</iframe>"
}];
</script>
</body>
</html>
