The Ultimate Guide to HTML5 Streaming
HTML5 is the most popular platform for video playback. This ultimate guide will help you get up and running with HTML5 streaming that allows you to reach any device, anywhere on Earth, at any time.
Any way you look at it, live streaming is exploding. More than 1.9 billion internet users are projected to be using online video by 2018. Worldwide revenues from OTT video are expected to reach more than $20 billion by the following year. Now’s the time to go all-in on online video.
Seven key steps to HTML5 streaming
Live video streaming can be confusing to newcomers. Sure, there’s the easy way to go: Facebook streaming, for example, is one-tap. But Facebook Live and other social streaming platforms such as Youtube Live have serious limitations.
If you need a more professional approach, things get a bit more complicated. Some people get lost in the maze of technical language. Don’t be like them. With the right preparation—including reading this post—you’ll be able to navigate live streaming terminology and technology with ease.
This guide will walk you through seven key steps and considerations for HTML5 streaming. Let’s begin!
1. Equipment needs
The first key element of live streaming is using the correct equipment. I’ll list the categories here and link you to some resources for additional learning on these subjects.
The first and most important piece of equipment is the video camera. Your camera can be as simple as a smartphone or as complex as a high-end cinema camera. Choosing between live streaming cameras will depend on the event you are planning to stream, the number of cameras needed, and so on. You can start with a small one, such as a Canon FS300 or a Sony DCR-HC1000. If you are already familiar with HTML5 streaming, you may want to consider a PTZ (Pan-Tilt-Zoom) camera.
You’ll also need microphones to capture audio. Surveys have shown that audio is an essential element in video streams when it comes to perceived quality. You can use the built-in microphone on your video cameras for audio. However, the quality won’t always be there, and you’ll have to watch out for background noise. Consider using higher-quality off-camera mics—like the Blue Yeti or a quality shotgun mic—to be sure you get the best possible audio quality.
The next piece of equipment you need to have is an encoder. There are two types of encoder: hardware and software.
Hardware encoders are ideal for either mobile run-and-gun situations or for high-end studio use. For most other uses, a software encoder application installed on a computer tablet or smartphone will likely meet all your needs.
OBS Studio is a capable, free live streaming application. Click here to learn more about some of the top streaming applications, including OBS. If you prefer a hardware encoder, check out the small camera-mounted “Cube” from Teradek, which is ideal for sports streaming.
2. Internet connectivity
Once you have your equipment needs sorted out, you’ll need to arrange an internet connection for your HTML5 stream. This connection can come from a variety of sources. You could use:
- A Wi-Fi network
- An Ethernet cable
- A cell network (3G is too slow; you’ll need a 4G LTE connection)
If you’re operating from a location with limited internet access (or if you’re mobile) it can be hard to rely on these types of connections. The solution for this problem is “Network Bonding,” which is when you combine multiple network connections into a single, faster, more reliable connection.
3. Bandwidth requirements to prevent buffering
Now that you are thinking about your internet connection, you need to consider its speed. If your internet speed is too slow, the quality of your HTML5 live stream will be limited. It can also create problems with buffering and lagging video. Only 8.2 percent of viewers will return to a site within the first day of experiencing a video failure, compared to 11.2 percent who return after a functional experience.
Internet speed is measured using two different metrics: download speed and upload speed.
- Download is the speed at which you can load data onto your devices, like watching Netflix.
- Upload is the speed at which you can send data out to the rest of the internet, like uploading a video to Instagram.
For the purposes of producing a live stream, upload speed is the more important number. Both upload and download speeds are measured using Mbps, or Megabits per second. So how can you measure your upload speed? The easiest way is to visit TestMy.net and run their upload speed test. Write down your results, then come back here.
What is your upload speed?
- 25 Mbps or higher – plenty of speed, ready for 4K streaming
- 5-8 Mbps – sufficient for streaming in 720p or 1080p HD (High Definition)
- 3 Mbps – sufficient for streaming in 480p standard definition
- 1.5 Mbps – enough speed for a reasonable 360p resolution
- 500 Kbps – lowest recommended speed; barely enough to stream video
These numbers are just recommendations. The actual amount of bandwidth your stream will require depends on a number of factors. To learn more about bandwidth, check out our full guide to bandwidth requirements for streaming.
4. Encoder settings
Next, let’s take a look at how to configure your encoder so that you get the best quality with the fewest interruptions. You’ll need to adapt your settings to your specific needs, but here are some recommendations in terms of common encoder settings:
Resolutions are listed by size, such as 640 x 360 pixels (often called 360p) or 1920 x 1080 pixels (often called “Full HD” or 1080p). Generally, choose the highest resolution that your upload speed can support.
Bitrate has an interplay with resolution. Higher bitrates are necessary to “carry” the data needed for larger video frame sizes. You can use the numbers under section 3 to provide a ballpark for your bitrate settings.
Generally, we recommend you “set it and forget it” at 30 frames per second (fps). If you’re broadcasting sports, you may need 60 fps.
We recommend setting the keyframe interval to 2-3 seconds.
5. Video and audio codecs
Technically speaking, a “codec” is a hardware or software tool that’s used to compress or decompress video. H.264, for example, is a standardized codec. Every modern device, web browser, video player, and TV knows how to decode the H.264 video.
The same holds true with audio. The most popular modern audio codec is AAC, which compresses audio.
If in doubt, use H.264 and AAC for all your video streaming needs. It’s easy to confuse yourself here. For example, AAC audio can be bundled with an H.264 video in a “container format” for transmission. To become a master of live streaming, it’s worth reading our short introduction to H.264, codecs, and container files.
6. All-device video player
Another key element in HTML5 streaming is the video player itself. Internet video is played via video players, just like on your desktop. It’s just that these players are built-in to the websites you visit. Back in the day, you had to use Flash for online video. It was slow and vulnerable to hacking, though.
Now, HTML5 streaming is a much better alternative. Online video platforms like Dacast include an HTML5 video player compatible with all mobile phones, tablets, and computers, as well as devices like Smart TVs. To learn more about HTML5 streaming video players and the advantages they provide, click here.
7. Online video platform
The final key element for HTML5 streaming is an online video platform. Also known as an OVP, these companies serve as a delivery mechanism for your video streams. An OVP provides access to a network of servers to deliver your content across the world while minimizing lagging and buffering.
They also provide a number of tools. Some of these can include things like analytics to help you understand who your viewers are and what they are doing, monetization options to help you generate income from your video, management tools to keep your content organized, and advanced tools like video APIs so that you can create customized solutions for technical problems.
Conclusion: setup run-through
In conclusion, let’s take a look at these elements and how they work together. To begin HTML5 streaming, you’ll need to gather your equipment: camera, audio gear, and encoder. Next, you’ll need to connect to the internet, then ensure that your connection is fast enough to stream with.
Once this step is complete, you should configure your encoder based on your internet speed. Finally, you should connect with your online video platform and make sure you’re using an HTML5 streaming compatible video player.
That’s really all there is to it! Any questions or additions? Let us know in the comments section! Thanks for reading—and good luck with your live streams.