Jak wstawić wideo z YouTube z automatycznym uruchamianiem i bez dźwięku

Spisie treści

W tym samouczku mam zamiar Cię nauczyć jak wstawić film z YouTube na swoją stronę internetową, który uruchamia się automatycznie podczas ładowania strony i nie ma dźwięku. W tym celu użyjemy API dostarczonego przez Youtbe. Będziemy musieli napisać kod w JavaScript, właściwie bardzo mało, zacznijmy.

Krok 1
Pierwszą rzeczą, którą musimy kontynuować, jest identyfikator filmu, który chcemy przesłać. W tym celu wchodzimy do YouTube i szukamy żądanego wideo, jego identyfikator będzie pochodził z v = w adresie URL, na poniższym obrazku pokazuję przykład:

Teraz możemy dodać skrypt do naszej strony, poniżej wyjaśniam kilka szczegółów, które należy wziąć pod uwagę.

Krok 2
Potrzebujemy miejsca w naszym HTML, gdzie dodać odtwarzacz, do tego używamy div, ta instrukcja w kodzie jest taka (identyfikator jest niezbędny dla funkcji, której używamy z API):

Możesz umieścić identyfikator, który chcesz, jeśli go zmienisz, zauważ, że w kodzie w kroku 4 pojawia się on również podczas tworzenia odtwarzacza, będziesz musiał go również zmienić, ponieważ odnosi się do tego div przez id.

Krok 3
Łączymy API YouTube z naszą stroną, w tym celu piszemy następującą instrukcję:

 
Zauważ, że jest to obciążenie asynchroniczne.

Krok 4
Dodajemy kilka tagów skryptu (na końcu samego ciała), w nich utworzymy funkcję onYouTubeIframeAPIReady (). Nazwę funkcji musisz tak zostawić. W ramach tej funkcji skonfigurujemy szerokość, wysokość odtwarzacza, identyfikator wideo i kilka innych cech.

 
[kolor = # a9a9a9] Kod z YouTube API [/ kolor]

Niektóre spostrzeżenia

  • Identyfikator wideo należy wprowadzić w identyfikator wideo.
  • Do automatycznego startu jest używany Automatyczne odtwarzanie, 1 będzie tak, że zaczyna się sam, jeśli wpiszesz 0, nie będzie.
  • Aby go wyciszyć, w obszarze zdarzeń używana jest następująca funkcja:
 onReady: funkcja (e) {e.target.mute (); }
Możesz również skonfigurować liczbę powtórzeń wideo (pętli), jeśli wyświetlane są elementy sterujące, takie jak odtwarzanie, głośność itp.

Oto pełny kod:

Podczas otwierania pliku, który ma powyższy kod, pojawi się odtwarzacz, jak widać na poniższym obrazku:

POWIĘKSZAĆ

Jeśli chcesz kod, zostawiam ci tutaj zip:

videoYoutube.zip 533 bajty 245 pobrań

Podobał Ci się i pomógł ten samouczek?Możesz nagrodzić autora, naciskając ten przycisk, aby dać mu pozytywny punkt

Będziesz pomóc w rozwoju serwisu, dzieląc stronę ze swoimi znajomymi

wave wave wave wave wave