Markus Seidl: Abspielen von Videos auf einer HTML Slideshow (JavaScript)

Beitrag lesen

SELF-Forum

Abspielen von Videos auf einer HTML Slideshow (JavaScript)

Markus Seidl
– Informationen zu den Bewertungsregeln

Hallo Liebe Community,

ich hoffe ich finde hier Hilfe, weil mit Google komme ich diese mal nicht wirklich weiter.

Ich habe von den W3Schools einen HTML Code für eine Slideshow übernommen. Jetzt würde ich das so gerne so erweitern, das damit auch Videos angezeigt werden können.

Aber immer wenn ich den JavaScript Teil (nach x[slideIndex - 1].style.display = "block" oder x[slideIndex - 1].style.display = "block") so anpasse, damit dort ein Play oder Stop steht, wird entweder wahlweise alles angehalten, oder nur das Bild vom Anfang des Videos angezeigt, aber nicht abgespielt.

Für mich stellt sich die Frage, geht es überhaupt, und wenn ja, wo muss ich das Play und Stop hinsetzen, damit das Video abgespielt wird. Hier mein derzeitiger Code:

<title>Slideshow</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .mySlides {
        display: none;
    }

    .this-content {
        z-index: -1;
    }

    body {
        overflow: hidden;
        margin: 0;
    }

    #myProgress {
        width: 100%;
        margin-top: -4px;
        position: absolute;
        background-color: #C0C0C0;
    }

    #myBar {
        height: 4px;
        background-color: #009440;
    }
</style>

<body>
    <div class="this-content">

        <video class="mySlides" style="width:100%" data-timeout=5000><source src="Slides/video.mp4" type='video/mp4'></video>
        <img class="mySlides" src="Slides/Folie1(30).JPG" style="width:100%" data-timeout=5000>

    </div>

    <div id="myProgress">
        <div id="myBar"></div>
    </div>
    <script>
        var progressBarTimeout = 0;
        var progressBarWidth = 1;
        var progressBarRefreshRate = 50;
        var i = 0;
        var id;
        var slideIndex = 0;

        move();
        carousel();
        function carousel() {
            var i;
            var x = document.getElementsByClassName("mySlides");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
				console.log(x[i].data-timeout);
            }
            slideIndex++;
            if (slideIndex > x.length) { slideIndex = 1 }
            x[slideIndex - 1].style.display = "block";

            progressBarTimeout = x[slideIndex - 1].dataset.timeout;
            progressBarWidth = 0;
            setTimeout(carousel, x[slideIndex - 1].dataset.timeout);
        }

        async function move() {
            msPerFrame = 1000 / progressBarRefreshRate;
            timestampLastStop = null;
            timestampNextStop = null;
            var elem = document.getElementById("myBar");

            timestampLastStop = Date.now();
            timestampNextStop = timestampLastStop + msPerFrame;
            while (true) {
                frames = progressBarTimeout / msPerFrame;
                result = await sleep(timestampNextStop - Date.now());
                result = null;
                timestampLastStop = timestampNextStop;
                timestampNextStop = timestampLastStop + msPerFrame;
                progressBarWidth++;
                elem.style.width = ((progressBarWidth / frames) * 100) + "%";
            }
        }

        function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }
    </script>
</body>
</html>

Gruß

Markus Seidl

Beitrag melden
–
Informationen zu den Bewertungsregeln