2013-12-15 7 views
14

Krótki przykład kodu używam w tej chwili tworzę iframe YouTube:Czy można ukryć duży czerwony przycisk odtwarzania youtube za pomocą parametru?

player = new YT.Player('[PLAYER ID]', { 
    height: '300', 
    width: '480', 
    videoId: '[VIDEO ID]', 
    playerVars: { 'controls': 0, 'showinfo': 0 }, 
}); 

To wszystko działa doskonale tak daleko, to ładowanie grzywny wideo bez kontroli lub pasek informacji, a ja jestem " ręcznie "odtwarza wideo przy użyciu javascript.

Problem polega na tym, że nie ma już potrzeby dużego czerwonego przycisku "play", który jest chwilowo wyświetlany podczas uruchamiania wideo.

enter image description here

Czy jest jakiś sposób mogę pozbyć się tego? Przejrzałem dokumentację i nie mogę znaleźć odpowiedniego parametru, który pozwoliłby mi ją ukryć.

Odpowiedz

0

Każdy film z YouTube ma 4 wygenerowane obrazy. Są one w przewidywalny sposób sformatowane w następujący sposób:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg 

Pierwszy na liście to obraz w pełnym rozmiarze, a inne to miniatury. (Tj. Jeden z 1.jpg, 2.jpg, 3.jpg) Obraz domyślny miniatur jest:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/default.jpg 

Dla wersji wysokiej jakości miniatury użyć adresu URL podobnego do tego:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/hqdefault.jpg 

Istnieje również Wersja miniatury o średniej jakości, używając adresu URL podobnego do HQ:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg 

Dla wersji standardowej miniatury, użyć adresu URL podobnego do tego:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/sddefault.jpg 

dla maksymalnej rozdzielczości wersji miniatury użyć adresu URL podobnego do tego:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/maxresdefault.jpg 

Wszystkie powyższe adresy są dostępne na https też. Po prostu zmień http na https w dowolnym z powyższych adresów URL. Dodatkowo, nieco krótsza nazwa hosta i3.ytimg.com działa zamiast img.youtube.com w przykładowych adresach URL powyżej.

Można również użyć YouTube Data API (v3) lub starszej YouTube API v2.0, aby uzyskać miniaturki.

+2

Doceniam trud związany z tą odpowiedzią, ale problem polega na tym, że obrazy są niechciane. Idealnie chciałbym się ich pozbyć. –

+0

Oba parametry znalazłem użyteczne są: showinfo = 0 kontrole = 0 autohide = 1 'showinfo = 0' pilnuje film nie wyświetla tytuł na górnej części klatki wideo. 'controls = 0' ukrywa dolny pasek za pomocą przycisku odtwarzania, głośności itp.' autohide = 1' ukrywa kontrolki, aż najedziesz na nie kursorem, co jest prawdopodobnie najbardziej przydatne. Wszystkie oficjalne dokumenty są [tutaj] (https://developers.google.com/youtube/player_parameters). –

+2

Wiem, kolego, doceniam to, ale już próbowałem tego; te parametry już istnieją. –

4

Znalazłem, że to niemożliwe. Tak więc jedynym sposobem na ukrycie przycisku Graj jest umieszczenie obrazu wideo nad filmem, który można pobrać z serwisu YouTube. Każdy film z YouTube ma 4 wygenerowane obrazy. Są przewidywalny sformatowany następująco:

http://img.youtube.com/vi/<insert-youtube-video-id-here>/0.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/1.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/2.jpg 
http://img.youtube.com/vi/<insert-youtube-video-id-here>/3.jpg 

Ale po dodaniu nakładkę, klikając na ekranie zamiast kontroli nie będzie odtworzyć film, Aby to zrobić, należy dodać następujące jQuery, która odtwarza wideo

jQuery('#overlay').click(function(){ 
    jQuery(this).hide(); 
    jQuery('#youtube_id').get(0).playVideo(); 
}); 
+4

To również byłoby niezgodne z warunkami korzystania z usługi, ponieważ nie można samodzielnie nakładać niczego na wideo. – jlmcdonald

+0

To nie jest prawda. Duży czerwony przycisk powtórki można pozbyć się, jak widać w [jwplayer.js] (https://support.jwplayer.com/customer/portal/articles/1406725-youtube-video-embed) i [video.js] (https://static.bini.io/cus-videos/) YouTube wrappery. Obie te popularne biblioteki javascript opierają się na interfejsie API iFrame YouTube w celu umieszczenia na stronach YouTube. Więc nie sądzę, żeby użyli jakiejś czarnej magii. – stillenat

+0

@stillenat 'video.js' na przykład używa" czarnej magii ". Po prostu pobiera jeden ze standardowych miniatur i wstawia taką nakładkę do DOM. Wstawia tylko wideo z youtube do DOM po naciśnięciu play, a nawet wtedy nie używa iframe YouTube. – fritzmg

Powiązane problemy