Udostępnij teraz w social media:


Osadzanie wideo z YouTube jest dość łatwe. Opcje udostępniania na dole wideo podają kod HTML potrzebny do osadzenia wideo w Twojej witrynie. YouTube ma kilka opcji udostępniania, ale wszystkie służą do udostępniania wideo. Ma to sens, biorąc pod uwagę, że YouTube jest w końcu witryną hostingową wideo. To powiedziawszy, wiele treści w YouTube to zwykły dźwięk. Wiele filmów zawiera dźwięk i niepowiązane obrazy, które należy wypełnić w części „wideo”. Niestety YouTube nie pozwala udostępniać ani osadzać tylko dźwięku z filmu. Musisz również dołączyć wideo. Jeśli chcesz przejrzeć oficjalne opcje udostępniania i osadzania udostępniane przez YouTube, istnieje prosty sposób na osadzenie tylko dźwięku z filmu. Rozwiązanie pochodzi od Amita Agarwal w postaci fragmentu kodu, który można modyfikować. Opiera się na YouTube Javascript API, które udostępnił na Github. Oto jak to działa.

Sprawdź -   Jak znaleźć zdjęcia krajobrazów w Unsplash na tapety

Krok 1: Znajdź wideo, z którego chcesz osadzić dźwięk. Zanotuj „ID” filmu. Identyfikator pojawia się w adresie URL filmu po części „v =” i jest wyróżniony na zrzucie ekranu poniżej.

Krok 2: Dodaj następujący fragment kodu do kodu HTML swojej witryny i zamień część „VIDEO_ID” na identyfikator wideo skopiowany w poprzednim kroku.

div data-video="VIDEO_ID"
data-autoplay="0"
data-loop="1"
id="youtube-audio">

Tak to powinno wyglądać.

youtube-audio-embed

Dźwięk nie będzie odtwarzany automatycznie. Będziesz musiał kliknąć przycisk odtwarzania, aby rozpocząć odtwarzanie. Możesz zmusić go do automatycznego odtwarzania i zapętlenia, wprowadzając kilka modyfikacji w kodzie. Aby gra odtwarzała się automatycznie, ustaw wartość „autoodtwarzania danych” na 1. Aby dźwięk odtwarzał się w pętli, ustaw „pętlę danych” na 1. Jeśli planujesz używać tego kodu we własnej witrynie internetowej i spodziewaj się dużego ruchu, najlepiej hostować skrypt na własnym serwerze. Możesz pobrać skrypt z linku poniżej.

Sprawdź -   Jak zmienić system plików dysku w systemie Windows 10

poprzez Digital Inspiration