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: Native HLS playback in the HTML5 video tag is supported on Safari for iOS and macOS. Native HLS is possible, but unreliable, on Android (4.2 or later). PC desktop browsers on Windows, Linux, and Mac (except Safari) do not allow native HLS playback in the video tag. MPED-DASH playback always requires an HTML5 player with Media Source Externsions support. Your results may vary.
Note: The preferred HTML5 player for Wowza Streaming Engine is Wowza Flowplayer. This player can be purchased as part of a Wowza Video subscription or as a standalone player.
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 and later for Mac | H.264 | AAC, MP3 |
| Chrome | Chrome 34 and later, on both desktop and Android | H.264, VP8, VP9 | AAC, MP3, Vorbis, Opus |
| Microsoft Edge | Most current version | H.264 | AAC, MP3 |
| Firefox | Most current version | H.264, VP8, VP9 | AAC, MP3, Vorbis, Opus |
Current versions of the Safari, Chrome, Microsoft Edge, and Firefox also support EME specifications.
Players that support HTML5/MSE
The following players stream HTML5 video from Wowza Streaming Engine:- Wowza Flowplayer: Preferred HTML5 player.
- JW Player
- THEOplayer
- Bitmovin Adaptive Streaming Player
