myGully.com - Webcam/Youtube Slideshow

myGully.com (https://mygully.com/index.php)

- Entwicklung & Programmierung (https://mygully.com/forumdisplay.php?f=72)

- - Webcam/Youtube Slideshow (https://mygully.com/showthread.php?t=5098085)

Webcam/Youtube Slideshow

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 und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]
[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt 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 und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...] und [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...] machen , da finde ich im Sourcecode aber den direkten Link zu den Webcams nicht...

villeicht hat ja einer eine Idee !

vielen Dank
DeCi

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>