HTML has gone through many iterations, and at first, audio/video embedding wasn’t native to the language. The latest version, HTML5, allows programmers to easily embed audio or video content into an HTML page with a simple tag—<audio> for audio and <video> for video.
HTML5 video streaming can be a quick and easy way to embed video on a page, or it can form the basis of a more complex offering like a full featured streaming service. In either case, it pays to do a little bit of optimizing to make sure video plays consistently and glitch-free across all platforms. So, here are a few tips for getting the most out of an embedded HTML5 video player.
Use the Right Format
When exporting video for streaming on the web, stick to standard formats, even if some browsers will support others. As a rule of thumb, MPEG-4 (MP4 files) is most widely compatible, with OGG and WebM commonly used as well.
Optimize Video Resolution
When you export video intended for streaming, there’s no reason to make it 4K. In fact, 1280x720 will do for most web videos, and if you know the video will never be blown up bigger, you can even drop it down a notch. This is a start toward making your video’s file size as small as possible which is crucial for streaming success.
Compress Your Video
Make sure your video is presented in a compressed format. This may go without saying, but it’s not unheard of for new content creators to try HTML5 video streaming with uncompressed video. Again, MPEG-4 is the most common format for exporting web videos, and that format is compressed.
Optimize Video Bitrate
Compression is important for streaming, and as it turns out, you have a great deal of control over the level of compression and the quality of your video output. Depending on your content, you may be able to compress more and use a lower overall resolution and still get a great look. The less data you can ask the server to stream, the better. However, you should understand the difference between resolution and bitrate before you start tweaking settings.
In a nutshell, resolution is basically size. As mentioned earlier, you want to output only to the largest size your audience will watch. Bitrate, however, is a measure that tells your video encoder how much to compress, or how much data you can throw away. Research this topic thoroughly because it can make a great deal of difference.
Use the Source Tag with Type Attribute to Ensure Compatibility
Inside the video tag, you can use the type attribute to tell the browser what format your video is in. The src gives the player the location of the file.
But, a more advanced method involves using the source tag, or to be more accurate—more than one source tag.
Using multiple source tags nested inside your video tag allows you to list several different video formats. This is helpful in ensuring your video is playable across all browsers. Browsers always try the first on the list first and iterate down until they find the first compatible format. Knowing this, you can put your smallest format first with several fallbacks rounding out the list. That code would look something like this:
<video width=”1280”>
<source src=”http://yoursite/vid.webm” type=”video/webm”>
<source src=”http://yoursite/vid.mp4” type=”video/mp4”>
<source src=”http://yoursite/vid.ogv” type=”video/ogv”>
</video>
Whereas a simpler embed tag would look like this:
<video width=”1280” src=”http://yoursite/vid.mp4” type=”video/mp4”>
Optimize Your Entire Channel for HTML5 Video Streaming
Live video streaming using HTML5 is effective, and it’s not that hard to get started. However, it’s a big subject to learn if you’re serious about your streaming content. If you don’t have time for a deep dive into all the ins and outs of server management, video optimization, and everything there is to learn, it may be time to up your game with a great streaming service. Contact us today to request a demo of Zype and find out how you can launch your very own streaming platform with all the nuts and bolts taken care of for you.