Webcam/Youtube Slideshow

decibel666 · 09.05.18, 15:35

Für Youtube+Panolive streams schaut mein 1.Lösungsansatz folgendermassen aus (im Beispiel sind 4 Streams drinnen, wobei jeder für hier für 20sek angezeigt wird bei Ausflösung 1920x1080, am besten Browser mit F11 in Vollbildmodus schalten! Die Umschaltung des Streams auf FullHD kann ein bisschen dauern! Kann auch leicht erweitert werden..

Jetzt fehlt mir nur noch die Lösung um die Live Kameras von Skylinewebcams und Whatsupcams auch einbinden zu können..

Code:

    <html>
    <head>
        <style>
            body, html { 
                height: 100%; 
                overflow: hidden; 
                padding: 0; 
                margin: 0; 
            }

            .page {
              top: 0; 
              left: 0; 
              width: 100%; 
              min-height: 100%; 
              position: absolute; 
              display: none; 
              overflow: hidden;
              border: 0;
            }

            .currentPage { 
              display: block; 
            }
        </style>
    </head>
    <body>
        <s*****>
            var TIME_PER_PAGE = 20000;
            window.onload = function() {
                var pages = document.querySelectorAll('.page'),
                    numPages = pages ? pages.length : 0;
                    i = -1;

                function nextPage() {
                    if (i >= 0)
                        pages[i].classList.remove('currentPage');

                    i = (i + 1) % numPages;
                    pages[i].classList.add('currentPage');
                    
                      setTimeout(nextPage, TIME_PER_PAGE);
                }

                nextPage();
            }
        </s*****>

        <div class="page"><iframe width="1920" height="1080" src="https://www.youtube.com/embed/-AdFX-OS2tI?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
        <div class="page"><iframe width="1920" height="1080" src="https://www.youtube.com/embed/vPbQcM4k1Ys?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
        <div class="page"><iframe width="1920" height="1080" src="https://www.youtube.com/embed/jXyUYkF1De0?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
        <div class="page"><iframe width="1920" height="1080" src="http://stream.panolive.com/6f109ca7-2224-11e4-a75b-002590c750be " frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
    </body>
    </html>