bmat.pl

Umieszczasz filmy z YouTube lub innego serwisu na swojej stronie internetowej? Jeśli tak, to być może zastanawiałeś się kiedyś co zrobić, aby Twój materiał wideo zamiast standardowego podglądu wyświetlał podgląd przygotowany przez Ciebie. Możesz tam umieścić przygotowaną na ten cel grafikę bądź osadzić w tym miejscu logo swojej organizacji. Być może nie masz świadomości, że użycie w tym wypadku click to play to także korzyści dla Twoich użytkowników. A o komfort użytkowników trzeba dbać.

 

Po co mi to?

Każdy załadowany film obciąża Twoją stronę WWW. Możesz tego nie zauważyć, jeśli osadzisz jeden materiał wideo, lecz każdy kolejny będzie powodować odczuwalną różnicę. Jeśli na Twojej witrynie internetowej umieścisz film z serwisu YouTube lub innego, będzie on musiał się wstępnie załadować, by być gotowym do ewentualnego odtworzenia. Pomyśl o użytkowniku: będzie on zmuszony dłużej zaczekać na załadowanie się Twojej strony, chociaż może wcale nie obejrzeć osadzonego przez Ciebie materiału. Jeśli w dodatku będzie on używał urządzenia mobilnego i korzystał przy tym ze swojego pakietu internetowego, straci on niepotrzebnie kilobajty danych. Podkreślam jeszcze raz: użytkownik może nie mieć intencji obejrzenia Twojego filmiku. Daj mu wolność wyboru. Niech sam zadecyduje czy chce obejrzeć przygotowany materiał i kiedy to nastąpi.

 

Gotowy kod

HTML:

<div class="video">
    <img src="images/icon_play.png" alt="Play" class="playicon"
        title="Kliknij, aby rozpocząć odtwarzanie" />
    <img src="http://img.youtube.com/vi/VIDEO_ID/0.jpg" alt="Tytuł filmu"
        title="Kliknij, aby rozpocząć odtwarzanie" class="videopreview"
        data-video="VIDEO_ID" />
</div>

Grafikę podglądu oraz ikonę odtwarzania zamykamy w div o klasie video, gdzie zostanie później załadowana ramka z filmem. Ikona odtwarzacza nie ma tu żadnego znaczenia, służy tylko i wyłącznie podkreśleniu, że jest to materiał wideo 😉 Ikonie nadałem tu klasę o nazwie playicon, natomiast podgląd filmu otrzymał klasę videopreview. Element ten otrzymał również dodatkowy atrybut data-video, który zawiera ID konkretnego filmu, który chcemy osadzić na stronie. Obrazek podglądu jest automatycznie pobierany z serwisu YouTube poprzez wspomniane ID. W przykładzie została użyta pierwsza wygenerowana przez YouTube miniatura (tu jako 0.jpg), jednak wedle uznania można wybrać inną, zmieniając zero na kolejną cyfrę lub nawet użyć zupełnie innej grafiki.

 

CSS (opcjonalnie):

.playicon {
    position: relative;
    width: 100px !important;
    margin: auto;
    margin-bottom: calc(-50% + 25px);
}

Ta reguła arkuszy stylów jest opcjonalna. Jest ona odpowiedzialna za ustawienie ikony odtwarzania możliwie na środku obrazka podglądu. Wartości width oraz margin-bottom (dostosowane do wymiarów mojego filmu) należy ustawić według własnego uznania oraz specyficznych wymagań.

 

JavaScript (jQuery):

$(document).ready(function () {
    $('.video img').click(function () {
        var videoid = $(this).parent().find('.videopreview').attr('data-video');
        $(this).parent().html('<iframe width="700" height="400" src="//www.youtube.com/embed/' + videoid + '?autoplay=1" frameborder="0" allowfullscreen></iframe>');
    });
});

Kliknięcie na dowolny element img wewnątrz video (a więc bez różnicy czy będzie to ikona odtwarzacza, czy obrazek podglądu) spowoduje wstawienie w to miejsce ramki z filmem z YouTube. Oczywiście możliwe jest osadzenie tutaj materiału z dowolnego serwisu. ID filmu pobierane jest z atrybutu data-video elementu podglądu, a następnie ramka uzupełniona o to ID jest wstawiana w miejsce wywołania. Za auto-odtwarzanie odpowiada parametr autoplay=1, dołączony do adresu ramki. Bez tego użytkownik po załadowaniu filmu musiałby kliknąć drugi raz, by uruchomić wideo.

 

Demo

(pominąłem ikonę odtwarzania z czystego lenistwa)

 

Bonus: pobieranie ID filmu z YouTube na podstawie adresu URL (PHP)

function getYoutubeVideoIdFromUrl($ytUrl) {
	$address = parse_url($ytUrl);
	parse_str($address['query'], $queryParams);
	return $queryParams['v'];
}