75 lines
2.1 KiB
HTML
75 lines
2.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>Live Stream Player</title>
|
|
<style>
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: black; /* Hintergrundfarbe auf Schwarz setzen */
|
|
}
|
|
|
|
#video-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#fullscreen-button {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
z-index: 999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="video-container">
|
|
<video id="videoPlayer" controls autoplay playsinline muted></video>
|
|
<button id="fullscreen-button">Fullscreen</button>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
|
|
<script>
|
|
const videoPlayer = document.getElementById('videoPlayer');
|
|
const fullscreenButton = document.getElementById('fullscreen-button');
|
|
|
|
fullscreenButton.addEventListener('click', () => {
|
|
if (videoPlayer.requestFullscreen) {
|
|
videoPlayer.requestFullscreen();
|
|
} else if (videoPlayer.mozRequestFullScreen) { /* Firefox */
|
|
videoPlayer.mozRequestFullScreen();
|
|
} else if (videoPlayer.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
|
|
videoPlayer.webkitRequestFullscreen();
|
|
} else if (videoPlayer.msRequestFullscreen) { /* IE/Edge */
|
|
videoPlayer.msRequestFullscreen();
|
|
}
|
|
});
|
|
|
|
// Add event listener when video ends to loop it
|
|
videoPlayer.addEventListener('ended', function() {
|
|
this.load();
|
|
this.play();
|
|
});
|
|
|
|
// Check if HLS.js is supported
|
|
if (Hls.isSupported()) {
|
|
const hls = new Hls();
|
|
hls.loadSource('https://ch-fra-n16.livespotting.com/vpu/qjkdtjva/4ctm3g1a_720.m3u8');
|
|
hls.attachMedia(videoPlayer);
|
|
} else {
|
|
console.error('HLS not supported');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|