When HTML5 was introduced in 2014, it included a myriad of different tags that made embedding media much easier. One such tag was the video tag, which offered a way to easily embed video content on your site pages. Live streaming works somewhat differently than standard streaming content, and only one browser – Apple’s Safari for iOS and desktop – supports it natively. However, you can still add live streaming to your site by converting it to OGG encoding.
Apple originally created HTTP Live Streaming (HLS) as a competitor to Adobe Flash in an effort to create a quality, non-choppy way for users to watch live streaming. For this reason, it’s why so few browsers natively support it. Microsoft Edge and Android browsers also support HLS natively in a video tag, but this leaves out several other viewers. Cutting out such a large group of viewers isn’t sustainable for a site owner, so it’s necessary for them to convert a stream into another file format and use it instead for other viewers.
Embedding Using the Video Tag
Even though HTML5 was released five years ago, the video tag with HLS is only supported by a few browsers (linked above), so remember that you should use this method along with converting the file for your other viewers. Using the video tag is very simple, and it’s the quickest way to add an HLS stream to your site.
The following is a quick and dirty way of adding a stream to your site:
Note that the m3u8 file extension indicates that you have an HLS file format stored on your server. When you try to run this code, unless you’re viewing it from Safari or Edge, it likely won’t play in your browser. Luckily, there is an alternative file format that you can use.
Converting to OGG and Embedding Files
First, you’ll need software to convert to OGG. One common application is VLC media player. It’s a free application, and it can be used to watch videos including MPEGs and MP4 files if you have any local movies stored.
Converting files takes only a few minutes. You can find out how to convert to OGG using VLC here. To summarize the instructions, open VLC media player and open the file that you want to convert. Click the “Media” menu item and select “Convert / Save.” Follow the instructions to save your file to the OGG format.
After your video is saved in OGG format, it will have the OGG file extension. You should test the video file after you convert it to ensure that the sound and video are in sync. Occasionally, the sound will be a few milliseconds behind video, which ruins your video and will drive away viewers.
After the conversion is done, you can now embed your file onto your web page using the HTML5 video tag. The following code shows you how to embed the file, which is similar to the previous example.
<video id="video" src=" http://yoursite.com/yourstream.ogg" autoplay="autoplay" />
The only difference here is that an ID is set, and the video is set to autoplay when a user loads it in a browser.
Using a CDN for Performance
No matter what file format you store streams on your server, you can’t get the speed and performance that a CDN can offer. CDNs cache your videos and stream directly to your clients from the closest data center to the viewer.
CDNs add reliability and available to your streams, so should you have a short outage, your viewers are still able to access videos. Performance, reliability, and availability added to your HLS content will ensure that your viewers are never interrupted.