Wowza Streaming Engine™ media server software supports delivery of live and on-demand content using HTML5 video and Apple HLS. This article contains instructions for HTML5 playback using the <video> HTML tag in your webpage.
Note: HTML5 video playback from Wowza Streaming Engine is supported on Safari for iOS and macOS. Playback is possible, but unreliable, on other browsers and on newer versions of Android (4.2 or later). Your results may vary.
Before you start
If you haven't done so already, first use Wowza Streaming Engine Manager to set up a live or VOD application to stream HLS video.
To test HTML5 video playback, insert one of the code examples below into an HTML webpage and use the HLS stream URL of your live or on-demand stream in the <video> tag.
HTML5 live streaming example
<html>
<head>
<title>HTML5 Live Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="http://[wowza-ip-address]:1935/myApplication/myStream/playlist.m3u8"></video>
</body>
</html>
Where:
- [wowza-ip-address] is the IP address of your Wowza Streaming Engine instance.
HTML5 on-demand streaming example
<html>
<head>
<title>HTML5 VOD Streaming Test</title>
</head>
<body>
<video width="640" height="400" controls="controls" src="http://[wowza-ip-address]:1935/myApplication/mp4:sample.mp4/playlist.m3u8">
</video>
</body>
</html>
Where:
- [wowza-ip-address] is the IP address of your Wowza Streaming Engine instance.
HTML5 and media extensions
Using HTML5 video alone has many limitations, however, the addition of the Media Source Extensions (MSE) and Encrypted Media Extensions (EME) specifications adds the benefits of adaptive bitrate streaming and playback of protected content, respectively.
MSE support allows JavaScript to generate streams for media playback using HTML media tags so you can play live or on-demand streams with HTML5. This means browser-independent player technology can be built without the use of plug-in technologies, enabling playback features such as adaptive bitrate streaming, time shifting, ad insertion, video editing, and multiple audio tracks. Videos are encoded once and then play consistently across modern browsers and most tablets and smartphones.
Browsers that support HTML5/MSE
All major browsers support H.264 video and AAC or MP3 audio while some browsers also support other codecs.| MSE support | Video codecs | Audio codecs | |
| Safari | Safari 8 for Mac | H.264 | AAC, MP3 |
| Chrome | Chrome 34 and later, on both desktop and Android | H.264, VP8, VP9 | AAC, MP3, Vorbis, Opus |
| Internet Explorer | Internet Explorer 11 on Windows 8 and later, on both desktop and Windows phone | H.264 | AAC, MP3 |
| Firefox | Firefox 37 and later (YouTube only, full support unavailable) | H.264, VP8, VP9 | AAC, MP3, Vorbis, Opus |
Current versions of the Safari, Chrome, Internet Explorer, and Firefox also support EME specifications.
