#### What is HLS Web Video?
HTTP Live Streaming (HLS) is a media streaming protocol designed by Apple for delivering video and audio content over the internet. Introduced in 2009, HLS is now a widely adopted standard for streaming media, particularly for web video, due to its adaptability, reliability, and broad compatibility across devices and platforms. It is used for both live and on-demand streaming.
**Key Features of HLS**:
- **Adaptive Bitrate Streaming**: HLS allows clients (e.g., video players) to dynamically switch between different quality levels (bitrates) of the same video based on the user's network speed and device capabilities. This ensures smooth playback with minimal buffering.
- **HTTP-Based Delivery**: HLS uses standard HTTP protocols, making it compatible with existing web infrastructure, including CDNs (Content Delivery Networks), web servers, and firewalls.
- **Segmented Media**: The media content is divided into small segments (typically 2-10 seconds long), stored as MPEG-2 Transport Stream (.ts) files. A playlist file (.m3u8) lists these segments and provides metadata, enabling the client to download and play them sequentially.
- **Wide Compatibility**: HLS is natively supported on Apple devices (iOS, macOS, tvOS), Android, modern web browsers (via HTML5 video players or Media Source Extensions), and Smart TVs. It is also supported by many video players like VLC, Video.js, and JW Player.
- **DRM Support**: HLS supports Digital Rights Management (DRM) for protecting copyrighted content, using technologies like FairPlay, Widevine, and PlayReady.
- **Low Latency Options**: Recent advancements, like Apple's Low-Latency HLS (introduced in 2019), reduce latency for live streaming, making it suitable for real-time applications like sports or gaming streams.
# HTML Examples
### HLS web video
- `EXAMPLE - HLS js viewer CDN.html`
![[z_img/f38113c547a35384287d0714cc52c901_MD5.jpeg]]
#### Code
``` html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>ORBNET HLS</title>
</head>
<body>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<video id="my_video" class="video-js" controls preload="auto" width="720" height="480">
<source src="http://192.168.1.201:8888/hls/obs" type="application/x-mpegURL">
</video>
<button id="btn_unMute">Un-mute</button><br>
<button id="btn_alert">Popup</button>
<button id="btn_play">Play Video</button>
<button id="btn_pause">Pause Video</button>
<script>
var player = videojs('my_video');
function popup()
{
alert("The function 'popop' is executed");
}
function playVid()
{
}
function pauseVid()
{
}
document.getElementById("btn_alert").addEventListener('click', event =>
{
popup();
});
document.getElementById("btn_play").addEventListener('click', event =>
{
playVid();
});
document.getElementById("btn_pause").addEventListener('click', event =>
{
pauseVid();
});
document.getElementById("btn_unMute").addEventListener('click', event =>
{
});
window.addEventListener('load', event => {
});
</script>
</body>
</html>
```