Created
March 10, 2026 05:27
-
-
Save prashantvc/5b7383fdd9f074a89c1fbd18a5d253fc to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Video Player</title> | |
| <style> | |
| :root { | |
| color-scheme: dark; | |
| font-family: Arial, sans-serif; | |
| } | |
| body { | |
| margin: 0; | |
| min-height: 100vh; | |
| display: grid; | |
| place-items: center; | |
| background: #111827; | |
| color: #f3f4f6; | |
| } | |
| main { | |
| width: min(90vw, 960px); | |
| padding: 24px; | |
| box-sizing: border-box; | |
| text-align: center; | |
| } | |
| video { | |
| width: 100%; | |
| border-radius: 12px; | |
| background: #000; | |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35); | |
| } | |
| p { | |
| margin-top: 12px; | |
| color: #d1d5db; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <h1>HLS Video Player</h1> | |
| <video id="video" controls autoplay muted playsinline></video> | |
| <p id="status">Loading stream...</p> | |
| </main> | |
| <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> | |
| <script> | |
| const streamUrl = "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"; | |
| const video = document.getElementById("video"); | |
| const status = document.getElementById("status"); | |
| function setStatus(message) { | |
| status.textContent = message; | |
| } | |
| if (video.canPlayType("application/vnd.apple.mpegurl")) { | |
| video.src = streamUrl; | |
| setStatus("Playing with native support."); | |
| } else if (window.Hls && window.Hls.isSupported()) { | |
| const hls = new window.Hls(); | |
| hls.loadSource(streamUrl); | |
| hls.attachMedia(video); | |
| hls.on(window.Hls.Events.MANIFEST_PARSED, function () { | |
| setStatus("Playing with hls.js."); | |
| video.play().catch(function () { | |
| setStatus("Stream loaded. Press play if autoplay is blocked."); | |
| }); | |
| }); | |
| hls.on(window.Hls.Events.ERROR, function (_, data) { | |
| if (data.fatal) { | |
| setStatus("Unable to play the stream."); | |
| } | |
| }); | |
| } else { | |
| setStatus("This browser does not support HLS playback."); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment