Hvordan Tilfeldig YouTube spilleliste Scripts

June 9

Hvis du har sett innebygde YouTube-videoer på en webside, har du fortsatt ikke kan vite at du kan legge inn spillelister også. En YouTube-spilleliste spiller spiller alle videoene som er lagret i spillelisten. Legg en spilleliste på websiden ved å lime på spillelisten koden generert av YouTube i HTML-dokumentet. En interessant måte å legge til variasjon til siden din er å lage en tilfeldig spilleliste generator script. Web-sider kan bruke dette skriptet til å vise en annen spilleliste hver gang et nettsted besøkende laster siden eller klikker på en knapp.

Bruksanvisning

kopiere spillelister

1 Besøk YouTube og klikk på YouTube-brukernavnet som vises i øvre høyre hjørne av en YouTube-side. Spillelistene dine vises øverst på siden.

2 Klikk på en av spillelistene. Den første videoen i spillelisten begynner å spille. Klikk på "Share" -knappen under videospilleren. En "Embed" -knappen vises.

3 Klikk på "Embed" knappen og kopierer spillelisten teksten som du ser i tekstboksen som vises under knappen. Åpne Notepad og limer teksten inn i et nytt dokument.

4 Klikk på en annen spilleliste, og klikk deretter på en av videoene i denne spillelisten. Klikk på "Share" -knappen, klikk på "Embed" og kopiere teksten som vises i tekstboksen. Lim den spillelisten tekst under teksten du limte inn i Notepad tidligere.

Legg til Web Page

5 Åpne en teksteditor eller en HTML editor. Lim inn følgende kode i dokumentets hoveddel:

</ Div>

</ Div>

Dette skaper to HTML div blokker. Hver blokk vil holde en av spillelistene du kopierte fra YouTube. Hver div blokk refererer til en CSS-klasse som heter "skjult". Det CSS-klasse gjør hver div usynlig. Merk at hver div har en unik numerisk id identifikator også. Id for første div er "1". Den andre div id er 2. Inngangs tag skaper en knapp. Dens klikkhendelsen kaller "showRandom" Javascript-funksjon og pasninger som fungerer et tall. At tallet representerer antall spillelister du har på siden. At antallet er 2 i dette eksempel. Hvis du hadde flere spillelister på siden, vil du passere det totale antall spillelister til funksjonen.

6 Kopier den første spillelisten du limte inn Notepad inn den blanke linjen som vises i første div blokken. Kopier andre spillelisten til den blanke linjen som vises i andre div blokken. Når du har gjort det, kan koden vises som vist nedenfor i dette eksemplet:

7 Lim inn koden nedenfor inn i dokumentet stil seksjon:

Dette skaper den "skjulte" class referert av divs i forrige trinn.

8 Lim inn følgende Javascript-kode i dokumentet manus seksjon:

funksjon showRandom (numberOfPlaylists) {
Var divObject;
for (var i = 1; i <= numberOfPlaylists; i ++) {
Var divObject = document.getElementById (i);
divObject.style.display = "ingen";
}

Var rand = Math.floor (Math.random () * numberOfPlaylists + 1);
Var divObject = document.getElementById (rand);
divObject.style.display = "block";
}

Denne Javascript-funksjonen genererer et tilfeldig nummer og lagrer den i "rand" variable. Det gjør da en av dine skjulte spillelistene vises avhengig av de lagret i variabelen verdi.

9 Lagre dokumentet og vise den i nettleseren din. Klikk på knappen som vises på siden. En YouTube-video-spiller som inneholder en av spillelistene dine. Klikk på knappen flere ganger. Når du klikker, genererer koden et nytt tilfeldig tall og viser forskjellige spillelister basert på verdien av tilfeldige tall generert. .

Hint

Dette eksemplet viser hvordan du kan inkludere to randomiserte spillelister på websiden. For å legge til en annen spilleliste, legge til en tredje div blokk til dokumentets hoveddel som vist på disse trinnene, og lim den spillelisten koden fra en annen YouTube-spilleliste innsiden som div. Sett at div id til 3. Endre nummeret i knapp klikk hendelsen 2-3 også. Nummeret som du sender til funksjonen i det knapp klikk hendelsen skal alltid tilsvare antall div blokker vises i HTML-dokumentet. Ved hjelp av dette mønsteret, kan du legge til så mange spillelister du vil til din webside.
For å gjøre en annen spilleliste vises når en bruker besøker websiden, ring showRandom funksjon inne på siden din "onload" hendelse.