added html pages

This commit is contained in:
masterElmar
2024-04-01 14:22:57 +02:00
parent 285b066c3a
commit b05be79773
5 changed files with 288 additions and 0 deletions

74
examples/bayern.html Normal file
View File

@ -0,0 +1,74 @@
<!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://brevent.akamaized.net/hls/live/2028222-b/event_05/master_1280p_3328.m3u8');
hls.attachMedia(videoPlayer);
} else {
console.error('HLS not supported');
}
</script>
</body>
</html>

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Embedded Page</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<iframe src="https://webtv.feratel.com/webtv/?design=v4&pg=5EB12424-7C2D-428A-BEFF-0C9140CD772F&cam=3177" id="embedded-frame"></iframe>
<script>
const iframe = document.getElementById('embedded-frame');
// Function to request fullscreen
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
}
// Request fullscreen when the document is loaded
document.addEventListener('DOMContentLoaded', function() {
requestFullscreen(iframe);
});
</script>
</body>
</html>

74
examples/torfhaus.html Normal file
View File

@ -0,0 +1,74 @@
<!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>

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fullscreen Embedded Page</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<iframe src="https://webtv.feratel.com/webtv/?cam=3175&t=1&design=v4&c0=0&c2=0&c39=1&c40=0&lg=de&pg=5EB12424-7C2D-428A-BEFF-0C9140CD772F&s=0" id="embedded-frame"></iframe>
<script>
const iframe = document.getElementById('embedded-frame');
// Function to request fullscreen
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
}
// Request fullscreen when the document is loaded
document.addEventListener('DOMContentLoaded', function() {
requestFullscreen(iframe);
});
</script>
</body>
</html>

View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
iframe {
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<iframe src="https://radar.wo-cloud.com/desktop/rr/interactive?wry=51.83,10.78&wrn=V2VybmlnZXJvZGU%3D&wrg=10454&wrf=true&wrx=51.83,10.78&wro=true&wrm=8" id="embedded-frame"></iframe>
<script>
const iframe = document.getElementById('embedded-frame');
// Function to request fullscreen
function requestFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) { /* Firefox */
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { /* IE/Edge */
element.msRequestFullscreen();
}
}
// Request fullscreen when the document is loaded
document.addEventListener('DOMContentLoaded', function() {
requestFullscreen(iframe);
});
</script>
</body>
</html>