Live
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hls.js Player Example</title></head><body> <div class="player__wrapper"> <video class="my-video" controls id="hls"></video> </div> <script src="//cdn.jsdelivr.net/npm/hls.js@latest"></script></body></html>
Live
x
.player__wrapper { margin: 20px auto; max-width: 600px;}.my-video { width: 100%;}
Live
xxxxxxxxxx17
if (Hls.isSupported()) { const hlsVideo = document.getElementById("hls"); const hls = new Hls(); // bind them together hls.attachMedia(hlsVideo); hls.on(Hls.Events.MEDIA_ATTACHED, function () { console.log("video and hls.js are now bound together !"); hls.loadSource( "https://demopage.gcdn.co/videos/2675_f5iSvhncRtDm5c8z/master.m3u8" ); hls.on(Hls.Events.MANIFEST_PARSED, function (event, data) { console.log( "manifest loaded, found " + data.levels.length + " quality level" ); }); });}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.