Files
yt-dlp-proxy/templates/player.html
T

55 lines
1.4 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }} - yt-dlp Proxy</title>
<link rel="stylesheet" href="https://unpkg.com/mvp.css">
<style>
body {
max-width: 900px;
margin: 0 auto;
padding: 1rem;
}
h1 {
margin-bottom: 1rem;
}
.video-container {
width: 100%;
background: #000;
aspect-ratio: 16 / 9;
}
video {
width: 100%;
height: 100%;
}
.back-link {
display: inline-block;
margin-bottom: 1rem;
}
</style>
</head>
<body>
<a href="/" class="back-link">← Back</a>
<h1>{{ title }}</h1>
<div class="video-container">
<video controls>
Your browser does not support HLS.
</video>
</div>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
const video = document.querySelector('video');
const hlsUrl = {{ proxy_hls_url | tojson }};
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(hlsUrl);
hls.attachMedia(video);
} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = hlsUrl;
}
</script>
</body>
</html>