JavaScript MP4-Player

1. Funktion playMovie(movieTitle)

Diese Funktion zeigt ein MP4-Video im Vollbildmodus über ein Overlay an.

function playMovie(movieTitle) {
            const videoContainer = document.createElement('div');
            videoContainer.style.position = 'fixed';
            videoContainer.style.top = '0';
            videoContainer.style.left = '0';
            videoContainer.style.width = '100%';
            videoContainer.style.height = '100%';
            videoContainer.style.background = 'rgba(0, 0, 0, 0.9)';
            videoContainer.style.display = 'flex';
            videoContainer.style.justifyContent = 'center';
            videoContainer.style.alignItems = 'center';
            videoContainer.style.zIndex = '42';
            videoContainer.innerHTML = `
            <video controls autoplay style="width: 80%; height: auto; border-radius: 10px;">
                <source src="` + movieTitle + `" type="video/mp4">
                Your browser does not support the video tag.
            </video>
            <button onclick="closeVideo()" style="position: absolute; top: 20px; right: 20px; background: #fff; border: none; font-size: 20px; padding: 10px 15px; cursor: pointer;">✖</button>`;
            document.body.appendChild(videoContainer);
        }

Jede Codezeile hat bestimmte Aufgaben, die das Verhalten und Aussehen des Video-Overlays festlegen.

const videoContainer = document.createElement('div');

→ Erstellt ein neues div-Element als Overlay.

videoContainer.style.position = 'fixed';

→ Fixiert das Element auf dem Bildschirm (z. B. für Modal-Fenster).

videoContainer.style.top = '0';

→ Positioniert das Overlay ganz oben ...

... style.width = '100%'; style.height = '100%';

→ ... und überdeckt den gesamten Bildschirm.

videoContainer.style.background = 'rgba(0, 0, 0, 0.9)';

→ Schwarzer halbtransparenter Hintergrund.

display: flex, justifyContent, alignItems

→ Zentriert das Video in der Mitte des Bildschirms.

videoContainer.innerHTML = `...`

→ Fügt HTML für das Video und den Schließen-Button ein.

document.body.appendChild(videoContainer);

→ Macht den Overlay-Player sichtbar.

2. Funktion closeVideo()

function closeVideo() {
            const videoContainer = document.querySelector('div[style*="fixed"]');
            if (videoContainer) {
                videoContainer.remove();
            }
        }

const videoContainer = document.querySelector('div[style*="fixed"]');

→ Findet das Overlay anhand des CSS-Stils ""position: fixed".

videoContainer.remove();

→ Entfernt das Overlay wieder aus dem DOM.

3. Scroll-Funktionen für eine horizontale Galerie

const container = document.getElementById('scrollContainer');

        function scrolltoLeft() {
            container.scrollBy({ left: -200, behavior: 'smooth' });
        }

        function scrolltoRight() {
            if (container.scrollLeft + container.clientWidth >= container.scrollWidth) {
                container.scrollTo({ left: 0, behavior: 'smooth' });
            } else {
                container.scrollBy({ left: 200, behavior: 'smooth' });
            }
        }

Diese Funktionen ermöglichen das horizontale Scrollen eines Containers mit sanfter Animation.