Webcam/Youtube Slideshow

decibel666 · 09.05.18, 13:08

Hallo!

Ich würde gerne auf meinem Tablet, welches als digitaler Bilderrahmen genutzt wird, mehrere Live Webcams bzw. Youtube Streams automatisch nacheinander (nach einer gewissen Zeit) im Vollbild anzeigen lassen .

d.h. ich habe zum Beispiel diese 5 Youtube Livestreams :
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]
[ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ]

Ich will jetzt jeden Stream für z.b. 5 minuten anzeigen lassen und danach wieder von vorne anfangen!

Ich würde gerne auch das gleiche mit einigen Webcams von [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ] und [ Link nur für registrierte Mitglieder sichtbar. Bitte einloggen oder neu registrieren ] machen , da finde ich im Sourcecode aber den direkten Link zu den Webcams nicht...

villeicht hat ja einer eine Idee !

vielen Dank
DeCi

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>