root
180 lines
4.9 KiB
HTML
180 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ filename }} - Ohm Stream Player</title>
|
|
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
background: #ffffff;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
color: #191919;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.header h1 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 10px;
|
|
color: #f15025;
|
|
}
|
|
|
|
.video-info {
|
|
background: #e6e8e6;
|
|
padding: 15px 20px;
|
|
border-radius: 4px;
|
|
border: 1px solid #ced0ce;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
}
|
|
|
|
.video-info .filename {
|
|
font-size: 1.1rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.video-info .filesize {
|
|
color: #ced0ce;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.video-wrapper {
|
|
background: #000;
|
|
border-radius: 4px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.plyr {
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.controls {
|
|
margin-top: 20px;
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.btn {
|
|
padding: 12px 24px;
|
|
background: #e6e8e6;
|
|
border: 1px solid #ced0ce;
|
|
color: #191919;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn:hover {
|
|
background: #ced0ce;
|
|
border-color: #191919;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: #f15025;
|
|
border: 1px solid #f15025;
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #d94420;
|
|
border-color: #d94420;
|
|
}
|
|
|
|
.error-message {
|
|
background: rgba(230, 57, 70, 0.1);
|
|
border: 1px solid #e63946;
|
|
color: #e63946;
|
|
padding: 20px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.header h1 {
|
|
font-size: 1.2rem;
|
|
}
|
|
.video-info { flex-direction: column; align-items: flex-start; }
|
|
.controls { flex-direction: column; }
|
|
.btn { width: 100%; justify-content: center; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="header">
|
|
<h1>🎬 Ohm Stream Player</h1>
|
|
</div>
|
|
|
|
<div class="video-info">
|
|
<span class="filename">{{ filename }}</span>
|
|
<span class="filesize">{{ "%.2f"|format(file_size / 1024 / 1024) }} MB</span>
|
|
</div>
|
|
|
|
<div class="video-wrapper">
|
|
<video id="player" playsinline controls preload="metadata">
|
|
<source src="/stream/{{ filename }}" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<a href="/web" class="btn">← Retour à l'accueil</a>
|
|
<a href="/stream/{{ filename }}" class="btn btn-primary" download>⬇️ Télécharger</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.plyr.io/3.7.8/plyr.polyfilled.js"></script>
|
|
<script>
|
|
const player = new Plyr('#player', {
|
|
captions: { active: true, update: true, language: 'auto' },
|
|
speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 2] }
|
|
});
|
|
|
|
// Error handling
|
|
player.on('error', (error) => {
|
|
console.error('Plyr error:', error);
|
|
const wrapper = document.querySelector('.video-wrapper');
|
|
wrapper.innerHTML = `
|
|
<div class="error-message">
|
|
Erreur lors de la lecture du flux vidéo.<br>
|
|
<a href="/video/{{ task_id }}" style="color: #f15025; text-decoration: underline;">Réessayer</a> ou
|
|
<a href="/stream/{{ filename }}" style="color: #f15025; text-decoration: underline;" download>Télécharger</a>
|
|
</div>
|
|
`;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|