HLS.js Usage Guide and Best Practices
In-depth explanation of HLS.js working principles, use cases, advantages and disadvantages, with complete code examples and solutions to common problems.
Read More →From basics to advanced — comprehensively understand the web video playback technology stack
Before HTML5, web video playback relied mainly on third-party plugins like Flash and QuickTime. HTML5 introduced the native <video> tag, making native browser video support possible. This was an important milestone in the history of web video development.
Playing video with the video tag is very simple, requiring just a few lines of code:
<video src="video.mp4" controls width="640" height="360">
Your browser does not support video playback
</video>Different browsers support different video formats, which was the biggest challenge for early HTML5 video:
To be compatible with all browsers, you can use the source tag to provide multiple formats:
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support video playback
</video>Although the native video tag is simple and easy to use, it has significant limitations:
Media Source Extensions (MSE) is an API standard developed by the W3C that allows JavaScript to dynamically inject media data into the video tag, enabling streaming support. MSE is the core technology for modern web video playback — players like HLS.js and dash.js are built on MSE.
The basic MSE workflow is as follows:
const video = document.querySelector('video');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
fetch('video-chunk.mp4')
.then(response => response.arrayBuffer())
.then(data => {
sourceBuffer.appendBuffer(data);
});
});Encrypted Media Extensions (EME) is another important set of APIs for playing media content protected by DRM (Digital Rights Management). Video sites like Netflix, YouTube Premium, and Disney+ all use EME to protect their video content from piracy.
Different browsers and devices support different DRM systems:
const video = document.querySelector('video');
navigator.requestMediaKeySystemAccess('com.widevine.alpha', [
{
videoCapabilities: [{ contentType: 'video/mp4; codecs="avc1.42E01E"' }]
}
]).then(access => {
return access.createMediaKeys();
}).then(mediaKeys => {
return video.setMediaKeys(mediaKeys);
}).then(() => {
video.src = 'encrypted-video.mp4';
video.play();
});WebCodecs is a low-level API provided by browsers that gives web developers direct access to the browser's built-in media codecs. Compared to MSE, WebCodecs is more low-level, more flexible, and offers better performance — it's the future direction of web video technology.
const decoder = new VideoDecoder({
output: frame => {
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.drawImage(frame, 0, 0);
frame.close();
},
error: e => console.error(e)
});
decoder.configure({
codec: 'vp09.00.10.08',
codedWidth: 1280,
codedHeight: 720
});
fetch('encoded-chunk.vp9')
.then(res => res.arrayBuffer())
.then(data => {
const chunk = new EncodedVideoChunk({
type: 'key',
timestamp: 0,
data: data
});
decoder.decode(chunk);
});Represented by Flash Player, browsers didn't natively support video and required third-party plugins. Advantages: unified format, powerful features. Disadvantages: poor security, low performance, no mobile device support.
The HTML5 video tag emerged, bringing native browser video playback support. Advantages: no plugins needed, good performance. Disadvantages: no streaming or DRM support, format fragmentation.
MSE and EME standardization made streaming and DRM possible. MSE-based players like HLS.js and dash.js proliferated, greatly improving web video experience. Adaptive bitrate and encrypted playback became standard.
The WebCodecs API provides low-level codec access, and WebAssembly performance has improved dramatically. Browsers can now handle more complex video processing, with applications like cloud gaming, video editing, and real-time communication flourishing.
Browser video playback technology has evolved from plugins to native, from simple playback to streaming, from fixed formats to flexible control. The HTML5 video tag is the foundation, MSE enables streaming playback, EME provides content protection, and WebCodecs opens up even broader possibilities.
Understanding these technical principles helps us better comprehend how web video players work. If you want to experience these technologies in action, try our M3U8 Online Player, which is built on HLS.js and MSE technology to play HLS streams directly in the browser.
More great articles and useful tools
In-depth explanation of HLS.js working principles, use cases, advantages and disadvantages, with complete code examples and solutions to common problems.
Read More →Beginner's guide teaching you how to watch FLV and RTMP live streams through web players, including live streaming fundamentals.
Read More →Comprehensive understanding of DASH protocol working principles, technical features, and use cases — master adaptive bitrate streaming technology.
Read More →Use our free M3U8 online player — no software installation needed, play HLS video streams directly in your browser
Try It Now ➡