mirror of
https://github.com/video-dev/hls.js.git
synced 2026-06-16 13:34:44 +00:00
359197f20b
* chore(deps): update dependency prettier to v3 * run prettier --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Tom Jenkinson <tom@tjenkinson.me>
73 lines
1.6 KiB
HTML
73 lines
1.6 KiB
HTML
<!doctype html>
|
|
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
|
|
<title>hls.js</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style>
|
|
.hlsjs {
|
|
position: relative;
|
|
width: 70%;
|
|
}
|
|
.ratio {
|
|
position: absolute;
|
|
padding-top: 75%;
|
|
}
|
|
video {
|
|
background-color: #ccc;
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|
|
<script src="../../../dist/hls.js"></script>
|
|
|
|
<script>
|
|
window.onload = function () {
|
|
if (Hls.isSupported()) {
|
|
var video1 = document.getElementById('video1'),
|
|
video2 = document.getElementById('video2'),
|
|
hls1 = new Hls({ debug: true }),
|
|
hls2 = new Hls({ debug: true });
|
|
|
|
hls1.on(Hls.Events.MEDIA_ATTACHED, function () {
|
|
hls1.loadSource(
|
|
'https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8'
|
|
);
|
|
});
|
|
|
|
hls2.on(Hls.Events.MEDIA_ATTACHED, function () {
|
|
hls2.loadSource(
|
|
'http://www.streambox.fr/playlists/x31jrg1/x31jrg1.m3u8'
|
|
);
|
|
});
|
|
|
|
hls1.attachMedia(video1);
|
|
hls2.attachMedia(video2);
|
|
}
|
|
};
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>hls.js</h1>
|
|
|
|
<h2>First instance</h2>
|
|
|
|
<div class="hlsjs">
|
|
<video id="video1" controls></video>
|
|
|
|
<div class="ratio"></div>
|
|
</div>
|
|
|
|
<h2>Second instance</h2>
|
|
|
|
<div class="hlsjs">
|
|
<video id="video2" controls></video>
|
|
|
|
<div class="ratio"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|