Blog WordPress – Jak wstawić video i utworzyć play listę?

Blog WordPress

Ten wpis powstał dzięki jednemu wpisowi z innego bloga oraz dzięki Kubie, który w komentarzu pod innym wpisem na moim blogu napisał o swoim problemie. Film na blogu zamieszczałem za pomocą jednej wtyczki, którą wcześniej opisałem we wpisie. Przetestowałem inną wtyczkę, która bardzo mi się spodobała ze względu na dostępne w niej opcje. W tym artykule i filmie pokażę Ci jak wstawiam video na bloga za pomocą tej wtyczki. Następnie dowiesz się jak utworzyć play listę z muzyką lub filmami.

Jak wstawić video i playliste na bloga WordPress

Wszystkie czynności, o których wspomniałem wcześniej wykonam za pomocą wtyczki JW Player. Na obrazku poniżej zaznaczyłem nazwę wtyczki i autora wtyczki po jej instalacji.

Po instalacji wtyczki JW Player na WordPress

Jak utworzyć i ustawić odtwarzacz?

Przycisk do ustawień wtyczki JW Player na WordPressKliknij w przycisk po lewej stronie panelu WordPressa o nazwie JW Player, aby wejść w ustawienia wtyczki.

Lista odtwarzaczy we wtyczce JW Player na WordPress

Na obrazku powyżej widać listę wcześniej ustawionych odtwarzaczy. Kliknij przycisk Create Custom Player, aby utworzyć nowy odtwarzacz. W polu Selected Player wpisz nazwę swojego odtwarzacza, który zaraz ustawisz.

W controlbar wybierz miejsce, gdzie chcesz umiejscowić pasek z przyciskami odtwarzacza. Masz do wyboru:

  • bottom – na dole (tak jest domyślnie i tak zostawiam),
  • top – na górze,
  • over – nałożony na film na dole,
  • none – brak.

W skin wybierz jedną z wielu skórek odtwarzacza, które zmieniają jego wygląd. Obok jest link do strony, na której możesz zobaczyć jak wyglądają odtwarzacze dla każdej skórki.

Autostart określa czy film ma zostać automatycznie uruchomiony zaraz po otworzeniu strony internetowej. Domyślnie jest false, czyli film uruchomi się dopiero po kliknięciu przycisku Play. Zmiana na true uruchomi opcję autostartu.

Height to wysokość odtwarzacza w pikselach. Natomiast Width do szerokość.

Na koniec kliknij przycisk Save, aby zapisać zmiany. Po tym pojawi się Twój nowy odtwarzacz na liście o nazwie jakiej nadałeś.

Na liście odtwarzaczy przy każdym z nich oprócz domyślnego są 3 przyciski:

  • Copy – kopiuje ustawienia do nowego odtwarzacza, które później możesz modyfikować,
  • Edit – edytujesz ustawienia wcześniej utworzonego odtwarzacza,
  • Delete – usuwa dany odtwarzacz.

Jak wstawić film na stronę internetową?

Utwórz nowy wpis lub stronę statyczną. Ewentualnie edytuj wcześniej utworzoną stronę WWW. W treści strony wstaw taki tekst:

(tutaj nawias kwadratowy otwierający)jwplayer config="nazwa odtwarzacza" file="ścieżka do pliku video" image="ścieżka do obrazka"](tutaj nawias kwadratowy zamykający)

Teraz Twoim zadaniem jest dokonać dwóch lub opcjonalnie trzech zmian w tym kodzie.

  1. Za wyrażeniem config= w cudzysłowach wpisz nazwę wcześniej utworzonego przez Ciebie odtwarzacza.
  2. Za wyrażeniem file= w cudzysłowach wpisz ścieżkę do filmu, który umieściłeś na swoim serwerze. Może też to być link do serwisu, na którym umieszczone jest video jak np. You Tube.
  3. Za wyrażeniem image= w cudzysłowach wpisz ścieżkę do obrazka, który pojawi się przed uruchomieniem filmu. Tego nie musisz koniecznie robić. Jeśli nie chcesz umieszczać własnego obrazka na odtwarzaczu video to usuń całe wyrażenie od image z powyższego kodu. Na końcu zostaw zamykający nawias kwadratowy.

Film na stronie www nie chce się otwierać?

Miałem raz taki problem. Napisała do mnie Magda z podobnym problemem. Napisałem jej co zrobić. Potwierdziło się, że to jest przyczyna, czemu film lub muzyka nie odtwarza się na stronie internetowej.

Serwery są obsługiwane najczęściej przez systemy Linux, a nie Windows. Na systemie Linux nie można w nazwach plików stosować polskich znaków, specjalnych znaków oraz spacji. Pamiętaj, aby przed wrzuceniem plików na serwer nadać im odpowiednie nazwy.

Przykładowo jak masz film o tytule „Jak umieścić film na blogu” w formacie mp4, to nadaj mu nazwę jak-umiescic-film-na-blogu.mp4. Podobnie działa mechanizm nadawanie nazw w linkach w WordPressie.

Jak utworzyć play listę na WordPress?

Na takiej liście możesz umieścić filmy i muzykę. Jednak odradzam mieszanie. Utwórz playlistę z samą muzyką lub samymi filmami. Zademonstruje to na przykładzie listy z muzyką. Wadą tego rozwiązanie jest to, że filmy muszą być umieszczone na serwerze. Nie wstawisz do listy filmów z serwisów typu jak You Tube.

Najpierw dodaj utwory muzyczne do WordPressa. W tym celu wejdź do zakładki Media po lewej stronie panelu i wybierz Dodaj nowe. Na tej stronie kliknij przycisk Wybierz pliki i dodawaj po kolei wszystkie pliki z muzyką, które chcesz umieścić na swojej play liście.

Podmenu Playlists w zakładce Media w WordPressGdy to zrobisz w podmenu Media kliknij link Playlists.

Jak utworzyć playliste na WordPress

Najpierw w polu New Playlist wpisz nazwę Twojej nowej play listy. Następnie kliknij przycisk Create Playlist.

W kolumnie po prawej stronie masz listę plików, które wcześniej dodałeś do WordPressa. Teraz kliknij pasek, na którym jest nazwa pliku, który chcesz dodać do play listy. Trzymając lewy przycisk myszy przeciągnij ten plik na kolumnę po lewej stronie. W ten sposób umieścisz wybrany plik w play liście. Zrób tak samo z resztą plików, które chcesz dodać do kolejki odtwarzania. Po dodaniu wszystkich możesz tak samo jak wcześniej przeciągnąć plik wyżej lub niżej na liście odtwarzania, aby zmienić ich kolejność.

Jak dopasować odtwarzacz do play listy?

Kolejnym Twoim zadaniem jest dopasowanie rozmiarów odtwarzacza. W przypadku filmów wcześniejsze ustawienia będą pasować. Jednak teraz jest to lista muzyczna. Dlatego nie ma potrzeby, aby pokazać pusty obraz podczas odtwarzania muzyki. Wystarczy zostawić sam pasek z przyciskami odtwarzacza.

Utwórz nowy odtwarzacz. Controlbar zostawiam na bottom, a Autostart na false. Ustaw takie wartości height (wysokość) i width (szerokość), aby był dobrze widoczny sam pasek z przyciskami odtwarzacza. Dla różnych skórek będą inne wymiary. Poeksperymentuj i dopasuj według uznania. Przykładowo dla domyślnej skórki (Default) wysokość to 24 piksele, a długość dałem na 400. Na koniec zapisz zmiany.

Jak dodać odtwarzacz z play listą na stronę WWW?

Wybierz stronę, gdzie chcesz dodać odtwarzacz. Ustaw kursor myszy, gdzie chcesz go umieścić na tej stronie. Następnie kliknij ikonę Dodaj medium nad polem tekstowym. Zaznaczyłem tą ikonę na obrazku poniżej.

Jak dodać medium na stronę w WordPress

W otwartym oknie wybierz zakładkę Playlists. W polu Select Playlist wybierz z listy nazwę play listy, którą chcesz teraz umieścić na stronie WWW. W polu Select Player wybierz z listy nazwę odtwarzacza, który przygotowałeś do odtwarzania muzyki. Na koniec kliknij przycisk Insert Playlist.

Wstawianie playlisty na stronę w WordPress

W wyniku tej operacji w polu tekstowym strony pojawi się kod, który wstawi przygotowany wcześniej odtwarzacz razem z wybraną play listą. Na koniec kliknij przycisk Opublikuj lub Zaktualizuj, zależnie czy to jest nowa strona lub modyfikowana.

Jak odtwarzać muzykę cały czas z play listy?

Ustawienia zaawansowane dla wtyczki JW Player na WordPress

Zaznaczyłem odpowiedzialną za to opcję na obrazku powyżej. Za nim do niej dojdę, to wspomnę o innych ustawieniach w tej sekcji.

Wejdź w edycję odtwarzacza do muzyki. Na górze strony wybierz zakładkę Advanced Settings (Ustawienia zaawansowane). Przejdź do sekcji Playlist. W polu:

  • item wpisz liczbę utworu na play liście, który ma być odtworzony jako pierwszy. Domyślnie jest to 0 i oznacza to pierwszy utwór na liście. Drugi będzie miał liczbę 1 i tak dalej,
  • playlist.position wybierz z listy, gdzie chcesz, aby pojawiły się nazwy utworów z listy. Domyślnie jest none, czyli nie będą pokazywane,
  • repeat wybierz z listy always, jeśli chcesz, aby ciągle były odtwarzane pliki muzyczne z listy (gdy wszystkie utwory z listy zostaną odtworzone, to ponownie od początku będzie odtwarzana lista i tak w nieskończoność),
  • shuffle wybierz sposób kolejności odtwarzania utworów. Domyślnie jest false, czyli po kolei jak są ustawione na liście. Gdy wybierzesz true to pliki będą losowane i nigdy nie wiadomo jaki będzie uruchomiany następny.

Jeśli podoba Ci się artykuł to kliknij poniżej przycisk „Lubię to!”.

Wpisz poniżej swój komentarz dotyczący tego wpisu i filmu. Jeśli coś jest dla Ciebie niejasne lub masz dodatkowe pytania, to wpisz je poniżej. Co jeszcze dla Ciebie powinna robić tego typu wtyczka do wstawiania multimediów na stronę internetową?

Paweł Protaś podpis

Następny artykuł z tej serii to Blog WordPress – Prosty sposób na automatyczne wstawianie linków

Podziel się na:
  • Facebook
  • Wykop
  • Twitter
  • Blip
  • Śledzik
  • Google Bookmarks
  • Gadu-Gadu Live
  • Blogger.com
  • co-robie
  • Forumowisko
  • Kciuk.pl
  • LinkedIn
  • Drukuj

Ten artykuł znaleziono w wyszukiwarce Google m.in. poprzez poniższe frazy kluczowe:

  • wordpress blog
  • blog wordpress

Komentarze: 13

  1. majk pisze:

    Szkoda, że dopiero teraz to pokazujecie – na moim blogu wstawiłem to wcześniej, ale sporo się nasiedziałem, zanim udało się to wdrożyć na stałe ;-)

  2. Genialnie prosta wtyczka. Właśnie zastanawiałem w jaki sensowny sposób wstawić kilka filmiów na stronie a rozwiązanie okazało się tak bardzo proste.
    Dzięki za cenny wpis. Teraz wszystko stało się proste
    Adrian Strójwąs ostatnio opublikował..Trotyl w TupolewieMy Profile

  3. Abel pisze:

    Dzięki za poradnik Z całą pewnością go wykorzystam
    Zastanawiałem się nad tym jak wstawić film i twój poradnik mi bardzo pomógł
    Abel ostatnio opublikował..Kolejna porcja aplikacjiMy Profile

  4. marek pisze:

    Super. Właśnie miałem problem bo nie mogłem wstawić video na moim blogu, mimo wstawienia kodu z YT nic się nie pojawiało. Miła niespodzianka, na dodatek z możliwością stworzenia playlisty. Będę tu wpadał częśćiej.

  5. keta pisze:

    dzięki za pomoc

  6. Szymon Owedyk pisze:

    Świetna wtyczka. Jak na razie pracowałem na Blogspot, ale już zaczynam na WordPressie:) Do siebie zapraszam na różne kursy muzyczne i informatyczne. Polecam!!!

    • Jestem przekonany Szymonie, że jak przejdziesz ze swoją stroną na WordPressa to rozwiniesz skrzydła i Twoja strona będzie jeszcze bardziej wartościowa. Gratuluję zrobienia kursów. Super, że dzielisz się swoją wiedzą.

  7. Kasia pisze:

    Pawle, jaki jest ten kod do wstawienia?
    Nie mogę sobie z tym poradzić.

    • W artykule napisałem jaki kod trzeba wstawić dla odtwarzacza video w tej wtyczce. Może wpisujesz kod i Ci nie działa. Jeśli tak, to napisz co dokładnie wpisujesz, to wtedy będę mógł Ci pomóc.

  8. lakomiak pisze:

    Dziękuję! Szukałem, szukałem aż wpadłem na Pański blog. Jak widać można bez mędrkowania za to bardzo skutecznie wytłumaczyć krok po kroku jak coś zrobić. Jeszcze raz dziękuję.

  9. potrzebuje troche pomoce w konfigurowaniu postawowym rzecze jak np zmienic rozmmiaru wideo yuotuba ktore zamierzam umiescic na stronny ?

    • Jeśli chcesz to zrobić bez użycia wtyczki to na każdą stronę www można wstawić gotowy kod odtwarzacza YouTube. Wejdź na stronę filmu na YouTube. Pod filmem kliknij link Udostępnij, a następnie Umieść na stronie. Wybierz z listy jeden z gotowych wymiarów odtwarzacza lub określ własny. Następnie zaznacz cały kod, który pojawi się tam w okienku i skopiuj go w odpowiednie miejsce kodu swojej strony.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CommentLuv badge

Czemu służy to pytanie?