Kaip įterpti „YouTube“ vaizdo įrašą su automatiniu paleidimu ir be garso

Turinys

Šioje pamokoje aš jus išmokysiu kaip į tinklalapį įterpti „YouTube“ vaizdo įrašą, kuris automatiškai įkeliamas įkeliant puslapį ir neturi garso. Tam naudosime „Youtbe“ pateiktą API. Turėsime rašyti kodą „JavaScript“, iš tikrųjų labai mažai, pradėkime.

1 žingsnis
Pirmas dalykas, kurį turime tęsti, yra vaizdo įrašo, kurį norime įkelti, identifikatorius. Norėdami tai padaryti, mes įeiname į „YouTube“ ir ieškome norimo vaizdo įrašo, kurio ID bus pateiktas iš v = URL, šiame paveikslėlyje parodysiu pavyzdį:

Dabar galime pridėti scenarijų prie savo puslapio, žemiau paaiškinu kai kurias detales, į kurias reikia atsižvelgti.

2 žingsnis
Mums reikia vietos HTML, kur pridėti grotuvą, tam mes naudojame div, ta instrukcija kode yra tokia (ID yra būtinas funkcijai, kurią naudojame iš API):

Galite įdėti norimą ID, jei jį pakeisite, pastebėkite, kad 4 veiksmo kode jis taip pat rodomas kuriant grotuvą, taip pat turėsite jį pakeisti, nes jis nurodo šį div per ID.

3 žingsnis
Mes susiejame „YouTube“ API su savo puslapiu, todėl parašome šią instrukciją:

 
Atminkite, kad tai yra asinchroninė apkrova.

4 žingsnis
Pridedame keletą scenarijaus žymų (paties kūno pabaigoje), jose sukursime funkciją onYouTubeIframeAPIReady (). Funkcijos pavadinimas, kurį turite palikti taip. Šioje funkcijoje mes sukonfigūruosime grotuvo plotį, aukštį, vaizdo įrašo ID ir kai kurias kitas savybes.

 
[color = # a9a9a9] Kodas su „YouTube“ API [/ spalva]

Kai kurios įžvalgos

  • Turi būti įvestas vaizdo įrašo ID videoId.
  • Naudojamas automatiniam paleidimui automatinis paleidimas, 1 bus taip, kad jis prasideda vienas, jei įdėsite 0, tai nebus.
  • Norėdami jį nutildyti, įvykių srityje naudojama ši funkcija:
 onReady: function (e) {e.target.mute (); }
Taip pat galite sukonfigūruoti, kiek kartų vaizdo įrašas kartojamas (ciklas), jei rodomi valdikliai, pvz., Atkūrimas, garsumas ir kt.

Čia yra visas kodas:

Atidarius failą, kurio kodas yra aukščiau, pasirodys grotuvas, kaip parodyta šiame paveikslėlyje:

DIDELIS

Jei norite kodo, palieku jums čia pašto kodą:

videoYoutube.zip 533 baitai 245 atsisiuntimai

Ar jums patiko ir padėjo ši pamoka?Galite apdovanoti autorių paspausdami šį mygtuką, kad suteiktumėte jam teigiamą tašką

Padėsite svetainės plėtrą, dalintis puslapį su draugais

wave wave wave wave wave