Wie Videos zufällig von Webseite anzeigen?

F

FinnPaketda

Grünschnabel
Guten Tag alle,

meine Frage ist ich habe soweit meine erste App geschrieben. Nun soll im bereich Videos immer Zufällig Videos vom YouTube Kanal angezeigt werden. Und das mann sie in der App abspielen kann. Zur Info ich habe vor 5 Tagen mit einer Webseite begonnen danach Taschenrechner ToDo Liste und dann halt meine eigene App.


HTML: 
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>

    <style>

        .img{

        padding-top: 5px;

        height: 50px;

        width: 200px;

        }

        .onevideo{

            height: 225px;

            width: 300px;

            transform:translate(44px,100px);

        }

        .background{

            background-color: #AD907F;

        }

        .twovideo{

            height: 225px;

            width: 300px;

            transform:translate(44px,50px);

        }

        .threevideo{

            height: 225px;

            width: 300px;

            transform:translate(44px,15px);

        }

    </style>

</head>

<body class="background">

    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

        <header style="background-color:#592555; border-color:blue; color:white" class="mdl-layout__header">

          <div class="mdl-layout__header-row">

            <!-- Title -->

            <span class="mdl-layout-title"><class="bild"></span>

            <!-- Add spacer, to align navigation to the right -->

            <div class="mdl-layout-spacer"></div>

            <!-- Navigation. We hide it in small screens. -->

          </div>

        </header>

        <div class="mdl-layout__drawer">

          <span class="mdl-layout-title"><img src="img/paketda.png" class="img"></span>

          <nav class="mdl-navigation">

            <a class="mdl-navigation__link" href="index.html">Home</a>

            <a class="mdl-navigation__link" href="blog.html">Blog</a>

            <a class="mdl-navigation__link" href="forum.html">Forum</a>

            <a class="mdl-navigation__link" href="videos.html">Videos</a>

            <a class="mdl-navigation__link" href="überuns.html">Über uns</a>

            <a class="mdl-navigation__link" href="kontakt.html">Kontakt</a>

            <a class="mdl-navigation__link" href="impressum.html">Impressum</a>

          </nav>

        </div>

        <main class="mdl-layout__content">

          <div class="page-content"><!-- Your content goes here --></div>

        </main>

      </div>

    <div class="onevideo">

    <iframe src="[MEDIA=youtube]OUnxYAirHMU[/MEDIA]" title="YouTube video player" frameborder="10" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>

    <div class="twovideo">

    <iframe src="[MEDIA=youtube]C-ZhsVwq_UQ[/MEDIA]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>

    <div class="threevideo">

    <iframe src="[MEDIA=youtube]0eYfaB88I3k[/MEDIA]" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

    </div>

</body>

</html>
 
Zuletzt bearbeitet von einem Moderator:
Ich würde erstmal nur ein iFrame einbinden, wo die YouTube Videos laufen sollen. Dann ein Javascript erstellen, wo du ein Array erstellst , wo die YouTube Links drinnen stehen (theoretisch reicht auch der Kram der hinter Watch steht im Link). Dann brauchst du nur noch ein 2 Zeiler der zufällig einen Link auf den Array holt und in den IFrame einsetzt.

So ein ähnliches Thema hatten wir hier schon mal , mal schauen ob ich das wieder finde
 
der zufällig einen Link auf den Array holt und in den IFrame einsetzt.
Zum Vergrößern anklicken....
Wenn man das so macht, kann es passieren dass, wie es der Zufall will, direkt hinter einander zwei Mal das selbe Element geholt wird. Das kann man vermeiden, indem man das Array mischt (shuffle) und dann die Elemente nacheinander holt. Algorithmus für das Mischen gibt es z. B. hier:
How can I shuffle an array?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück