BunnyCDN-DE1-1077
tcp/443 tcp/80
BunnyCDN-DE1-1079
tcp/443 tcp/80
BunnyCDN-DE1-1334
tcp/443 tcp/80
Open service 2400:52e0:1e00::1077:1:443 · player.alteox.dev
2026-01-25 09:02
HTTP/1.1 200 OK
Date: Sun, 25 Jan 2026 09:02:19 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1077
CDN-PullZone: 1278548
CDN-RequestCountryCode: DE
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-1140
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 01/25/2026 09:02:09
CDN-EdgeStorageId: 865
CDN-RequestId: 5057fff3ae84fe21b9fc38b78394f3b0
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 169.150.247.36:80 · player.alteox.dev
2026-01-25 09:02
HTTP/1.1 200 OK
Date: Sun, 25 Jan 2026 09:02:20 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1079
CDN-PullZone: 1278548
CDN-RequestCountryCode: IN
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-1140
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 01/25/2026 09:02:09
CDN-EdgeStorageId: 865
CDN-RequestId: c5cf832e774da29a54854161d1a37ed9
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 2400:52e0:1e00::1077:1:80 · player.alteox.dev
2026-01-25 09:02
HTTP/1.1 200 OK
Date: Sun, 25 Jan 2026 09:02:19 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1077
CDN-PullZone: 1278548
CDN-RequestCountryCode: DE
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-1140
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 01/25/2026 09:02:09
CDN-EdgeStorageId: 865
CDN-RequestId: 822c9935e0fdf175724907767844b657
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 169.150.247.36:443 · player.alteox.dev
2026-01-25 09:02
HTTP/1.1 200 OK
Date: Sun, 25 Jan 2026 09:02:20 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1079
CDN-PullZone: 1278548
CDN-RequestCountryCode: SG
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-1140
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 01/25/2026 09:02:09
CDN-EdgeStorageId: 865
CDN-RequestId: fe795694c3c57f3a2e9dbdccdfdc6fb4
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 2400:52e0:1e00:2::1334:1:443 · player.alteox.dev
2025-12-23 08:03
HTTP/1.1 200 OK
Date: Tue, 23 Dec 2025 08:03:08 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1334
CDN-PullZone: 1278548
CDN-RequestCountryCode: SG
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-755
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 12/23/2025 08:03:07
CDN-EdgeStorageId: 865
CDN-RequestId: 5756de8dd18f515de1e32a7ac453e665
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 185.111.111.160:443 · player.alteox.dev
2025-12-23 08:03
HTTP/1.1 200 OK
Date: Tue, 23 Dec 2025 08:03:08 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1334
CDN-PullZone: 1278548
CDN-RequestCountryCode: US
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-755
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 12/23/2025 08:03:07
CDN-EdgeStorageId: 865
CDN-RequestId: b6a8a99e96e4bec585ab01708cce65d2
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 185.111.111.160:80 · player.alteox.dev
2025-12-23 08:03
HTTP/1.1 200 OK
Date: Tue, 23 Dec 2025 08:03:08 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1334
CDN-PullZone: 1278548
CDN-RequestCountryCode: CA
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-755
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 12/23/2025 08:03:07
CDN-EdgeStorageId: 865
CDN-RequestId: 875c01bd318823514f287fb9b878019a
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi
Open service 2400:52e0:1e00:2::1334:1:80 · player.alteox.dev
2025-12-23 08:03
HTTP/1.1 200 OK
Date: Tue, 23 Dec 2025 08:03:07 GMT
Content-Type: text/html
Content-Length: 20587
Connection: close
Vary: Accept-Encoding
Server: BunnyCDN-DE1-1334
CDN-PullZone: 1278548
CDN-RequestCountryCode: DE
Cache-Control: public, max-age=2592000
Last-Modified: Thu, 16 Mar 2023 09:33:38 GMT
CDN-StorageServer: DE-755
CDN-FileServer: 491
CDN-ProxyVer: 1.43
CDN-RequestPullSuccess: True
CDN-RequestPullCode: 206
CDN-CachedAt: 12/23/2025 08:03:07
CDN-EdgeStorageId: 865
CDN-RequestId: d7e737f00ec72e81ea71c21a11f6b8e8
CDN-Cache: HIT
CDN-Status: 200
CDN-RequestTime: 0
Accept-Ranges: bytes
Page title: hls.js demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>hls.js demo</title>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"
/>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"
/>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.2/ace.js"></script>
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1>
<a target="_blank" href="https://github.com/video-dev/hls.js">
<img
src="https://cloud.githubusercontent.com/assets/616833/19739063/e10be95a-9bb9-11e6-8100-2896f8500138.png"
/>
</a>
</h1>
<h2 class="title">demo</h2>
<h3>
<a href="../api-docs">API docs | usage guide</a>
</h3>
</header>
</div>
<div class="main-container">
<header>
<p>
Test your HLS streams in all supported browsers
(Chrome/Firefox/IE11/Edge/Safari).
</p>
<p>Advanced controls are available at the bottom of this page.</p>
<p>
<b
>Looking for a more <i>basic</i> usage example? Go
<a href="basic-usage.html">here</a>.</b
><br />
</p>
</header>
<div id="controls">
<div class="demo-controls-wrapper">
<select id="streamSelect" class="innerControls">
<option value="" selected>
Select a test-stream from drop-down menu. Or enter custom URL
below
</option>
</select>
<input id="streamURL" class="innerControls" type="text" value="" />
<label
class="innerControls"
title="Uncheck this to disable loading of streams selected from the drop-down above."
>
Enable streaming:
<input id="enableStreaming" type="checkbox" checked />
</label>
<label
class="innerControls"
title="When a media error occurs, attempt to recover playback by calling `hls.recoverMediaError()`."
>
Auto-recover media-errors:
<input id="autoRecoverError" type="checkbox" checked />
</label>
<label
class="innerControls"
title="Stop loading and playback if playback under-buffer stalls. This can help debug stall errors."
>
Stop on first stall:
<input id="stopOnStall" type="checkbox" unchecked />
</label>
<label class="innerControls">
Dump transmuxed fMP4 data:
<input id="dumpfMP4" type="checkbox" unchecked />
</label>
<label class="innerControls">
Metrics history (max limit, -1 is unlimited):
<input id="limitMetrics" style="width: 8em" type="number" />
</label>
<label class="innerControls">
HTML video element width:
<select id="videoSize" style="float: right">
<option value="240px">240px</option>
<option value="426px">426px</option>
<option value="640px">640px</option>
<option value="720px">720px</option>
<option value="854px">854px</option>
<option value="1280px">1280px</option>
<option value="1920px">1920px</option>
<option value="80%">Responsive (80%)</option>
<option value="100%">Responsive (100%)</option>
</select>
</label>
<label class="innerControls">
Current player size:
<span id="currentSi