96 lines
3.1 KiB
HTML
96 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Document</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
<style>
|
|
/* Hide default controls */
|
|
video::-webkit-media-controls {
|
|
display: none !important;
|
|
}
|
|
|
|
video::-webkit-media-controls-enclosure {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Custom controls styling */
|
|
#customControls {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 30px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
#playPauseBtn {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#progressBar {
|
|
flex: 1;
|
|
margin: 0 10px;
|
|
}
|
|
|
|
#timeDisplay {
|
|
margin-left: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<video id="audioPlayer" style="width: 100%; height: 0;"></video>
|
|
<div id="customControls">
|
|
<button id="playPauseBtn">Play</button>
|
|
<input type="range" id="progressBar" min="0" max="100" value="0">
|
|
<span id="timeDisplay">0:00</span>
|
|
</div>
|
|
<script>
|
|
let source = 'eed0fa530f95531f9fac2a962dfbc7ea/audio/index.m3u8';
|
|
if (Hls.isSupported()) {
|
|
var hls = new Hls();
|
|
hls.loadSource(source);
|
|
hls.attachMedia(document.getElementById('audioPlayer'));
|
|
hls.on(Hls.Events.MANIFEST_PARSED, function () {
|
|
document.getElementById('audioPlayer').play();
|
|
});
|
|
} else if (document.getElementById('audioPlayer').canPlayType('application/vnd.apple.mpegurl')) {
|
|
document.getElementById('audioPlayer').src = source;
|
|
document.getElementById('audioPlayer').addEventListener('loadedmetadata', function () {
|
|
document.getElementById('audioPlayer').play();
|
|
});
|
|
}
|
|
|
|
const playPauseBtn = document.getElementById('playPauseBtn');
|
|
const progressBar = document.getElementById('progressBar');
|
|
const timeDisplay = document.getElementById('timeDisplay');
|
|
const audioPlayer = document.getElementById('audioPlayer');
|
|
|
|
playPauseBtn.addEventListener('click', () => {
|
|
if (audioPlayer.paused) {
|
|
audioPlayer.play();
|
|
playPauseBtn.textContent = 'Pause';
|
|
} else {
|
|
audioPlayer.pause();
|
|
playPauseBtn.textContent = 'Play';
|
|
}
|
|
});
|
|
|
|
audioPlayer.addEventListener('timeupdate', () => {
|
|
const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
|
|
progressBar.value = progress;
|
|
const minutes = Math.floor(audioPlayer.currentTime / 60);
|
|
const seconds = Math.floor(audioPlayer.currentTime % 60);
|
|
timeDisplay.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
|
});
|
|
|
|
progressBar.addEventListener('input', () => {
|
|
const time = (progressBar.value / 100) * audioPlayer.duration;
|
|
audioPlayer.currentTime = time;
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |