Kompletny przewodnik po korzystaniu z wideo z Divi

Wideo to potężne narzędzie. Jeśli obraz jest wart tysiąca słów, minuta filmu jest warta 1,8 miliona słów (przynajmniej tak sugeruje badacz dr James McQuivey). Wideo jest skutecznym narzędziem marketingowym, a gdy jest dobrze zrobione, narzędziem pięknego projektu.

Dodanie wideo do Twojej witryny jest łatwe dzięki Divi. Moduły suwaków wideo i wideo pozwalają dodawać filmy hostowane przez osoby trzecie, takie jak youtube i vimeo, po prostu wprowadzając adres URL wideo. Możesz nawet dodawać własne, niestandardowe filmy w formatach mp4 i webm, aby zapewnić maksymalną kompatybilność z przeglądarką. Co więcej, Divi daje możliwość stylizowania swoich filmów za pomocą nakładek graficznych i przycisków odtwarzania, aby pomóc dopasować projekt do Twojej witryny.

Oprócz osadzania filmów na swojej stronie, Divi zapewnia również proste rozwiązanie do dodawania filmów w tle. Obecnie, gdy tworzysz witrynę za pomocą konstruktora Divi, każda sekcja, wiersz, kolumna i 20 z 37 modułów mają funkcję wideo w tle.

W przypadku większości osób korzystanie z Wideo w Divi jest tak proste, jak wstawienie linku do wybranego filmu na YouTube lub Vimeo i wyświetlenie go w poście lub na stronie. Ale w tym poście porozmawiamy o tym, jak i dlaczego Divi robi to, co robi z wideo, abyś był w pełni przygotowany do wszelkich specjalnych przypadków użycia, unikalnych stylów lub kreatywnych eksperymentów, które możesz chcieć przeprowadzić.

W tym przewodniku omówimy…

• za kulisami działania modułu wideo i modułu suwaka wideo, dzięki czemu możesz z nich korzystać bardziej efektywnie.
• różnica między samodzielnym hostowaniem filmów a korzystaniem z usług hostingowych innej firmy.
• kilka wskazówek na temat optymalizacji filmów pod kątem internetu.
• najlepsze praktyki dotyczące Tła wideo.
• ogólny przewodnik dotyczący wyboru wymiarów wideo.
• i kilka pomocnych hacków do filmów w tle.

Zacznijmy.

Poznawanie modułu wideo

Moduł wideo umożliwia umieszczanie filmów na swojej stronie z niemal dowolnego źródła. Dokumentacja Divi dotycząca modułu wideo wyjaśnia wszystkie funkcje i sposób dodawania wideo do swojej strony. Ale w tym poście zamierzam sięgnąć trochę głębiej.

Dodawanie wideo hostowanego samodzielnie do modułu wideo

Aby dodać wideo na własnym serwerze za pomocą modułu wideo, musisz przesłać wideo lub dodać adres URL do pliku wideo w ustawieniach wideo. I musisz dodać swój film w dwóch formatach plików.

I to wszystko, co naprawdę musisz zrobić. Wystarczająco proste.

Jednak za kulisami Divi używa elementu wideo HTML5 do wyświetlania wideo. Kiedy zdecydujesz się dodać wideo z własnego hosta lub przesłać własne wideo przy użyciu formatów mp4 i webm, struktura kodu wdrażanego przez Divi wygląda mniej więcej tak:

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
Error loading this resource
</video>

Oto kilka rzeczy, na które chciałbym zwrócić uwagę w związku z tym, co robi ten kod:

1. Zwróć uwagę na atrybut kontroli w tagu <video>. To mówi wideo, aby wyświetlić elementy sterujące. Wystarczająco proste.
2. Zwróć uwagę na dwa tagi <source> w otwierającym i zamykającym tagu <video>. Źródła składają się z plików wideo. Pierwszy to mp4, a drugi to format pliku webm. Oba są niezbędne do maksymalnego wsparcia przeglądarki. Ważna jest również kolejność. Chcesz, aby przeglądarka najpierw zobaczyła mp4, ponieważ jest najbardziej uniwersalnie obsługiwany. Więcej o tych formatach omówię później.
3. Wiersz o treści „Błąd ładowania tego zasobu” zostanie wyświetlony, jeśli pierwsze dwa formaty nie zostaną rozpoznane.
4. To, czego nie widać, to to, że Divi nadało stylowi ten tag <video> i nadało mu szerokość 100%, aby był responsywny, dzięki czemu Twój film dostosuje się do szerokości kolumny, w której się znajduje.

Ten element wideo HTML5 staje się nowym standardowym sposobem wyświetlania wideo w sieci. Na szczęście Divi zajmuje się tym za nas.

Samohostowana nakładka obrazu wideo

Oprócz opcji dodawania filmów do modułu wideo, Divi umożliwia również dodanie niestandardowego obrazu nakładki do filmu.

Jeśli zdecydujesz się dodać obraz nakładki do własnego filmu wideo, musisz przesłać własny. Opcja generowania obrazu z wideo dotyczy tylko adresów URL wideo hostowanych przez strony trzecie, takich jak Youtube i Vimeo.

Ponieważ obraz stanie się rozmiarem wideo i ponieważ wideo dostosuje się do rozmiaru kolumny, w której się znajduje, ważne jest, aby wybrać odpowiedni rozmiar obrazu. Filmy z YouTube, Vimeo i większości innych formatów mają zwykle proporcje 16:9. Jeśli więc masz ustawioną maksymalną szerokość treści na domyślną 1080px Divi, to zgodnie z proporcjami 16:9 Twój film będzie miał wymiary 1080×608. Dlatego obraz nakładki powinien mieć 1080×608 pikseli.

Przycisk odtwarzania

Po ustawieniu obrazu Divi automatycznie zastosuje niestandardowy przycisk odtwarzania. Możesz nawet zmienić kolor przycisku, jeśli chcesz, w ustawieniach wideo na karcie Projekt.

Gdy użytkownik kliknie nakładkę z niestandardowym przyciskiem odtwarzania, nakładka i przycisk znikną, a wideo pod nakładką rozpocznie się automatycznie.

Dodawanie adresu URL wideo hostowanego przez inną firmę

Najpopularniejszą metodą dodawania wideo do modułu wideo jest po prostu dodanie adresu URL wideo hostowanego przez stronę trzecią, taką jak Youtube lub Vimeo. Więc zamiast dodawać dwa formaty wideo, tak jak w przypadku filmów z własnym hostingiem, po prostu dodaj adres URL na górnym pasku wprowadzania danych w tle.

Za kulisami Divi dodaje div wrapper o płynnej szerokości i osadza element iframe wyświetlający wideo. Ten element iframe jest taki sam, jak otrzymany bezpośrednio z youtube. Oto przykład tego, jak wygląda kod podczas dodawania wideo z YouTube za pomocą modułu wideo:

<div class="fluid-width-video-wrapper" style="padding-top: 56.2963%;">
<iframe src="https://www.youtube.com/embed/Nimdf3Zeayk?autoplay=1&amp;amp;feature=oembed&amp;amp;wmode=opaque" frameborder="0" allowfullscreen="" id="fitvid0">
</iframe>
</div>

Element div z klasą „fluid-width-video-wrapper” owija się wokół elementu iframe i nadaje mu szerokość 100%, dzięki czemu dostosowuje się do szerokości swojego kontenera, dzięki czemu jest responsywny.

Jeśli zdecydujesz się dodać obraz nakładki, możesz przesłać własny lub, aby zaoszczędzić trochę bólu głowy, możesz po prostu kliknąć „wygeneruj z wideo”, a Divi automatycznie zastosuje obraz nakładki pobrany z wideo. Możesz także dostosować przycisk odtwarzania.

Poznawanie modułu suwaka wideo

Suwak wideo działa bardzo podobnie do modułu wideo w sposobie wdrażania wideo na stronie internetowej, z tą różnicą, że teraz wideo są w suwaku. Jest to wygodny sposób wyświetlania filmów w jednym miejscu, dzięki czemu użytkownicy mogą po prostu przewijać grupę filmów pojedynczo. Aby uzyskać więcej informacji na temat opcji modułu Video Slider, możesz odwiedzić stronę dokumentacji.

Jednym z moich ulubionych elementów suwaka wideo jest ścieżka miniatur, której można używać do sterowania slajdami. Jest zarówno wygodny, jak i wciągający.

Możesz nawet dostosować kolory suwaków w ustawieniach modułu, w tym w Kolorze nakładki miniatur.

Miniaturowe obrazy pozostaną w rozmiarze oryginalnego obrazu, który prześlesz, więc uważaj, aby nie przesłać kilku dużych obrazów do suwaka, ponieważ może to spowolnić działanie witryny. Ponadto miniatury nie mogą być generowane automatycznie z wideo. Musisz je wgrać samodzielnie.

Miniatury mają proporcje 4: 3, więc aby dostosować obrazy suwaków 16: 9, zostaną one wysadzone i odcięte po prawej i lewej stronie obrazu, aby pokryć całą przestrzeń.

Wskazówka projektowa : Jedną ze sztuczek, które możesz zrobić, aby zmniejszyć rozmiar pliku i zachować miniatury przed odcięciem części obrazu, jest dostosowanie miniatur do 253 × 190 pikseli (współczynnik proporcji 4: 3) i wybranie opcji ukrycia wyświetlanie nakładek obrazu na głównym wideo. W ten sposób obrazy nakładek będą używane tylko jako miniatury i dlatego nie będą musiały być większe, aby dostosować się do głównego rozmiaru wideo.

4 ważne wskazówki dotyczące samodzielnego hostowania filmów wideo

1. Użyj CDN. Jeśli myślisz o dodaniu swoich filmów za pośrednictwem Biblioteki multimediów WordPress, pomyśl jeszcze raz. Chociaż możliwe jest hostowanie filmów na własnej instalacji WordPress na własnym serwerze, prawdopodobnie napotkasz pewne ograniczenia dotyczące przepustowości, rozmiaru plików, przestrzeni dyskowej itp., co może powodować problemy z czasem ładowania witryny i powodować opóźnienia w przesyłaniu strumieniowym wideo . Rozważałbym umieszczenie Twoich filmów w zewnętrznym serwisie, takim jak Amazons3. Pomoże to w skróceniu czasu ładowania strony. Ponadto niektórzy z tych dostawców oferują poziom bezpieczeństwa, aby uniemożliwić ludziom pobieranie Twoich filmów (lub przynajmniej utrudnić pobieranie).
2. Zoptymalizuj plik dla Internetu. Filmy zajmują dużo przepustowości, zwłaszcza gdy używasz dużego tła wideo. Musisz uważać, aby nie przeciążyć swojej strony. Istnieje wiele czynników, które należy wziąć pod uwagę, jeśli chcesz odpowiednio zoptymalizować swój film pod kątem internetu. Oto pomocne równanie do rozważenia:
   rozmiar pliku = bitrate (kilobity na sekundę) x czas trwania (długość wideo w sekundach)

   Tak więc, jeśli chcesz uzyskać mniejszy rozmiar pliku, musisz skrócić czas trwania (długość wideo) i/lub przepływność (liczbę przesyłanych kilobitów na sekundę). Bitrate powinien być zawsze niższy niż szybkość połączenia użytkownika. Biorąc pod uwagę, że światowa prędkość Internetu wynosi około 7 Mb/s (USA to około 18 Mb/s), warto utrzymać szybkość transmisji znacznie poniżej tej wartości, aby uniknąć zakłóceń w przesyłaniu strumieniowym.

   Nie musisz robić tego wszystkiego sam. Istnieje kilka świetnych darmowych narzędzi, które pomogą Ci w kompresji wideo, takich jak hamulec ręczny.

   Proponuję przeczytać „5 najlepszych sposobów na zmniejszenie rozmiaru wideo w celu szybszego ładowania”, jeśli chcesz dowiedzieć się więcej o optymalizacji filmów w Internecie. Wymieniono kilka świetnych zasobów i świetne wyjaśnienie, jak używać hamulca ręcznego.

3. Dodaj prawidłowe formaty plików.
   Jak wspomniałem wcześniej, jeśli sam hostujesz swoje filmy (nie polegając na stronie trzeciej, która hostuje je dla Ciebie, np. Youtube), musisz dodać swoje wideo zarówno w formacie mp4, jak i webm.

   Mp4 jest obecnie najczęściej obsługiwanym formatem, ponieważ nadal odtwarza niektóre stare przeglądarki korzystające z pamięci flash i jest standardem obsługi przeglądarek mobilnych. Divi wyświetla plik mp4 jako pierwszy w kodzie, dzięki czemu urządzenia z systemem iOS mogą natychmiast rozpoznać plik.

   Webm jest drugim najczęściej obsługiwanym formatem. Został zbudowany dla sieci i wydaje się, że zostanie. Zapewnia wysokiej jakości przesyłanie strumieniowe z doskonałą kompresją. I to jest open source.

   Łącznie te dwa oferują obsługę większości przeglądarek internetowych, w tym urządzeń mobilnych.

   Świetnym darmowym narzędziem do konwersji byłby odtwarzacz multimedialny VLC.

4. Zdefiniuj typy MIME: Aby format wideo WEBM działał we wszystkich przeglądarkach, twój serwer musi mieć wyznaczone właściwe typy MIME. Możesz dowiedzieć się więcej o używaniu .htaccess do definiowania typów MIME tutaj. Jeśli zauważysz, że Twoje filmy nie są odtwarzane w niektórych przeglądarkach, prawdopodobnie jest to przyczyną. Aby dodać typy MIME do pliku .htaccess, użyj klienta FTP (takiego jak FileZilla), aby uzyskać dostęp do plików głównych WordPress. Tam powinieneś znaleźć swój plik .htaccess. Otwórz plik w edytorze tekstu. Poniżej wiersza z napisem „#END WordPress” dodaj następujące:

   AddType wideo/mp4 .mp4 .m4v
   AddType wideo/ogg .ogv
   AddType wideo/webm .webm

   

   Następnie zapisz plik. Teraz Twoje formaty wideo będą rozpoznawane we wszystkich przeglądarkach.

Hosting na platformach innych firm (YouTube i Vimeo)

Jeśli okaże się, że konwertowanie i kompresowanie własnych filmów to zbyt dużo pracy, zawsze możesz pozwolić, aby osoba trzecia wykonała pracę za Ciebie.

Jeśli nic nie wiesz o wideo, sugeruję skorzystanie z tej trasy. Jeśli nie przepadasz za ograniczeniami youtube lub vimeo free, możesz ugryźć kulę w Vimeo Pro. Na dłuższą metę może to być warte bólu głowy. To, czego nie chcesz, to umieszczanie w witrynie wideo, które spowalnia działanie lub wygląda źle. Po prostu nie warto.

Platformy wideo innych firm obsługiwane przez moduły wideo i suwaków wideo

Jeśli chcesz użyć modułów wideo i suwaków wideo, aby dodać filmy innych firm, możesz użyć następujących popularnych platform:

• youtube
• Vimeo
• Ruch dzienny

Jak dodać filmy innych firm za pomocą Divi

Aby dodać film z dowolnej z tych platform, musisz przejść do ich witryny, aby uzyskać link do udostępniania.

Następnie możesz wkleić to do modułu Video lub Video Slider.

Kliknij przycisk „Generuj z wideo”, aby dodać nakładkę obrazu. Lub prześlij własny.

Zapisz ustawienia. I to wszystko.

Pamiętaj, że Divi jest zbudowany na WordPress, więc zawsze możesz osadzać filmy z platform innych firm, używając ich sugerowanych kodów do osadzania bez korzystania z modułu wideo. Po prostu dodaj moduł tekstowy i wprowadź kod do umieszczenia w polu treści.

Może być konieczne dostosowanie szerokości i wysokości umieszczanego elementu, aby dostosować go do responsywnego układu.

A co z Wistią?

Wistia to potężna platforma, z której korzysta wiele osób, ale niestety obecnie nie działa dobrze z modułami Divi. Możesz jednak osadzić Wistię za pomocą dostarczonego przez nich kodu do osadzenia.

Wklejenie tego kodu w sekcji treści w witrynie Divi spowoduje wyświetlenie wideo.

Możesz nawet wkleić kod do sekcji treści modułu suwaka, aby dodać wideo wistia jako jeden ze slajdów. Będziesz jednak musiał dostosować niektóre CSS, aby wyglądał tak, jak chcesz.

Używanie Tła Wideo z Divi

Czy powinieneś nawet używać tła wideo?

Zanim przejdziemy do szczegółów tła wideo, ważne jest, abyś szczerze zadał sobie pytanie, czy w ogóle powinieneś go używać. Nie zrozum mnie źle, uwielbiam dobre tło wideo. Ale czasami to po prostu nie ma sensu. Nie popełnij tego błędu, filmy spowalniają Twoją witrynę i mogą rozpraszać Twoje treści. Dlatego nigdy nie wybieraj tła wideo zamiast bardziej efektywnego obrazu. Twoja strona może być lepsza bez niej.

Ale są chwile, kiedy wideo jest lepszym rozwiązaniem niż obraz. Dobrze zrobione tło wideo może ożywić Twoje treści. Spraw, aby Twój film był celowy i liczył się.

Możliwości tła wideo w Divi

Możesz dodać tło wideo prawie w dowolnym miejscu za pomocą Divi Builder. Możesz dodać tło wideo do każdej sekcji, wiersza i kolumny. Możesz nawet dodać tła wideo do większości modułów.
Oto moduły obsługujące tła wideo.

• Nagłówek o pełnej szerokości (działa również w opcji pełnoekranowej)
• Menu o pełnej szerokości
• Portfolio o pełnej szerokości
• Suwak postu o pełnej szerokości (gdy nie używasz wyróżnionego obrazu, możesz użyć tła wideo, które będzie służyć jako tło dla wszystkich slajdów)
• Tytuł posta o pełnej szerokości
• Suwak pełnej szerokości (działa z pojedynczymi slajdami)
• Moduł audio
• Liczniki barowe
• Moduł Blurb – po prostu upewnij się, że masz trochę dopełnienia modułu.
• Moduł wezwania do działania
• Odliczanie czasu
• Poczta e-mail
• Filtrowalne portfolio
• Moduł logowania
• Moduł licznika liczb
• Moduł Osoba
• Ustawienia portfela
• Suwak postów (gdy nie używasz wyróżnionego obrazu, możesz użyć tła wideo, które będzie służyć jako tło dla wszystkich slajdów)
• Tytuł posta
• Tabela cen (możesz ustawić tło wideo dla modułu i dla różnych tabel indywidualnie)
• Suwak (tylko dla tła pojedynczych slajdów)
• Zakładki (zarówno dla tła modułu, jak i poszczególnych zakładek)
• Zaświadczenie
• Tekst
• Przełącznik

Biblioteki Stock Video

Najtrudniejszą częścią dodawania tła wideo do witryny jest znalezienie odpowiedniego obrazu i upewnienie się, że ma on odpowiedni rozmiar. Na szczęście nie musisz tworzyć własnych niestandardowych teł wideo. Dostępne są wolne od tantiem biblioteki wideo, które mogą dobrze działać w Twojej witrynie. Jeśli szukasz darmowego materiału wideo, dobrym miejscem na rozpoczęcie jest videvo, coverr lub videezy. Jeśli szukasz lepszej jakości płatnych wersji, możesz sprawdzić ula wideo, bloki wideo lub staw5. Niektóre z tych witryn naprawdę dobrze wykorzystują tła wideo, jeśli szukasz inspiracji.

Jak dodać tło wideo do swojej strony?

Gdy znajdziesz (lub utworzysz) odpowiedni film, sprawy stają się naprawdę proste. Aby dodać tło wideo do swojej strony Divi, po prostu wdróż konstruktor wizualny i znajdź sekcję, do której chcesz dodać wideo, i kliknij ikonę Ustawienia sekcji.

Na karcie treści kliknij ikonę/kartę obrazu tła w opcjach tła. Jeśli masz własny film wideo, wprowadź formaty mp4 i webm. Następnie wprowadź wymiary filmu, aby Divi wiedział, jak prawidłowo je zwymiarować.

Teraz przejdź do zakładki obrazu tła i dodaj obraz tła, który będzie dobrym rozwiązaniem dla urządzeń mobilnych.

Następnie zapisz ustawienia. To takie proste.

Jeśli planujesz użyć jednego ze swoich filmów, które teraz hostujesz na youtube (lub vimeo) jako tła, nie jest to obecnie możliwe w kreatorze Divi. Pamiętaj, że potrzebujesz tych filmów w odpowiednich formatach, aby wyświetlać się we wszystkich przeglądarkach. Możesz jednak pobrać ten film z YouTube (jeśli należy do Ciebie) i przekonwertować go na formaty mp4 i webm, aby używać go w tle.

Wskazówka dotycząca projektowania tła: używanie tła wideo do suwaka postów o pełnej szerokości

Jeśli szukasz kreatywnego sposobu na zaprezentowanie polecanych postów na stronie bloga, możesz dodać tło wideo do suwaka posta. Pokażę ci, co mam na myśli.

Przejdź do swojej strony za pomocą programu Visual Builder i dodaj sekcję o pełnej szerokości u góry strony z modułem suwaka postu o pełnej szerokości.

Na karcie Treść, w obszarze Pokaż polecany obraz, wybierz „NIE”.

Następnie w sekcji Tło wybierz kartę tła wideo i dodaj oba formaty wideo wraz z wymiarami.

Dobrym pomysłem jest również dodanie obrazu tła jako zastępczego dla urządzeń mobilnych, które nie mogą wyświetlać tła wideo.

Otóż ​​to.

Teraz użytkownik może przewijać polecany przez Ciebie suwak postów z fajnym filmem w tle. Tylko upewnij się, że tło wideo jest wystarczająco subtelne, aby nie odwracać uwagi od treści.

Najlepsze praktyki dotyczące tła wideo

Biorąc pod uwagę wszystkie możliwości, jakie dają tła wideo, pomyślałem, że najlepiej będzie uwzględnić kilka ogólnych najlepszych praktyk.

1. Zawsze dołączaj obraz tła jako rozwiązanie zastępcze dla urządzeń mobilnych. Urządzenia mobilne nie odtwarzają automatycznie dużych filmów. Dlatego Divi domyślnie wyświetla obraz awaryjny na urządzeniach mobilnych.
2. Użyj krótkiego filmu. W przypadku filmów w tle można uciec z rozdzielczością 720p, ponieważ tło to druga myśl na temat treści/tekstu nakładającego się na wideo. Jakość nie ucierpi tak bardzo, jakbyś to zauważył.
3. Rozważ nakładkę. Dodanie półprzezroczystej kolorowej nakładki na wideo pomoże Ci uniknąć mniejszego rozmiaru pliku, ponieważ ukryje niechlujne szczegóły filmu o niższej jakości. Dodatkowo sprawi, że Twój tekst będzie się bardziej wyróżniał.
4. Nie używaj dźwięku. Nie potrzebujesz dźwięku do tła wideo, więc wyjmij go. Zmniejszy to rozmiar pliku.
5. Korzystaj z formatów mp4 i webm do obsługi różnych przeglądarek.

Wstrzymać wideo?

Być może widziałeś tę opcję wymienioną w ustawieniach w opcjach tła.

W niektórych przypadkach film może kolidować z dźwiękiem odtwarzanym w tle innego filmu. Ta opcja umożliwia jednoczesne odtwarzanie tylko jednego dźwięku wideo.

Divi wideo Hacki

Istnieje kilka bardziej zaawansowanych dostosowań wideo i tła wideo, które mogą okazać się pomocne. Tu jest kilka.

Zmień rozmiar przycisku odtwarzania

Jeśli chcesz zmienić rozmiar przycisku odtwarzania, przejdź do ustawień modułu wideo na karcie Zaawansowane i wprowadź następujący niestandardowy kod CSS w polu oznaczonym „Ikona wideo”:

Font-size: 10rem;
Line-height: 10rem;
Margin-top: -5rem;
Margin-left: -5rem;

Możesz dostosować wartości do żądanego rozmiaru. Tylko upewnij się, że rozmiar czcionki i wysokość linii zawsze pozostają takie same, a margines górny i dolny margines zawsze pozostają wartością ujemną, która jest o połowę mniejsza od rozmiaru czcionki. Na przykład, jeśli chcesz go zmniejszyć, wartości będą takie.

Font-size: 4rem;
Line-height: 4rem;
Margin-top: -2rem;
Margin-left: -2rem;

Jak zatrzymać zatrzymanie tła wideo po kliknięciu?

W niektórych przypadkach może się okazać, że kliknięcie tła wideo spowoduje wstrzymanie wideo. Możesz wyłączyć tę funkcję, dodając następujący niestandardowy kod CSS do pliku style.css w motywie podrzędnym (lub w dostosowywaniu motywu > Dodatkowy kod CSS):

.et_pb_section_video_bg video {
pointer-events: none;
}

Jak zatrzymać zapętlanie tła wideo?

Być może pamiętasz tę wskazówkę z jednego z naszych starszych postów. Domyślnie tło wideo będzie nadal zapętlone. Jest to celowe, ponieważ zwykle to jest to, co chcesz zrobić w tle wideo. Ale jeśli chcesz tylko raz pokazać swoje wideo w tle, a następnie wyjść, możesz wyłączyć akcję pętli, przechodząc do Divi> Opcje motywu> Integracja i wprowadź następujące dane w:

<script>
(function($) {
    $(document).ready(function() {
        $('.no-loop .et_pb_section_video_bg').each(function() {
            $(this).find('video').removeAttr('loop');
        });
    });
})(jQuery);
</script>

Wymiary wideo dla Divi

Nie chciałem kończyć posta bez podania wymiarów wideo. Nie ma jednoznacznych zasad dotyczących tego, jakich wymiarów użyć, biorąc pod uwagę, że wszystkie filmy i strony internetowe są różne. Film 720p (1280×720) może wyglądać świetnie rozciągnięty na ekranie 1920×1080, podczas gdy inny będzie wyglądał okropnie. Decydując o wymiarach lub rozdzielczości wideo dla swojej witryny, możesz kierować się wymiarami obrazu dla układów kolumn i modułów Divi jako ogólnej wytycznej. Mówiąc najprościej, Twój film powinien być najbliższy szerokości kolumny, w której się znajduje, bez przechodzenia pod nią. Więc jeśli masz kolumnę o pełnej szerokości, która ma maksymalną szerokość 1080px, nie powinieneś potrzebować wideo o rozdzielczości większej niż 720p (1280×720). Jeśli jednak używasz tła wideo, które obejmuje całą szerokość przeglądarki, może być konieczne zwiększenie rozdzielczości do 1080p (1920×1080), aby gdy obejmuje całą szerokość przeglądarki na większych monitorach, nie wyglądać ziarnisto.

Jeśli zamierzasz polegać na profesjonalnym wideo innej firmy, aby przygotować swoje filmy do internetu, oto lista zalecanych rozdzielczości wideo dla youtube.

2160p: 3840×2160
1440p: 2560×1440
1080p: 1920×1080
720p: 1280×720
480p: 854×480
360p: 640×360
240p: 426×240

Są one zgodne z proporcjami 16:9, dzięki czemu nie zobaczysz czarnych pasków po bokach filmu.

Vimeo podaje również wytyczne dotyczące filmów. Szczególnie podoba mi się post Vimeo dotyczący podstaw kompresji wideo.

Końcowe przemyślenia

Filmy będą przez długi czas integralną częścią naszego doświadczenia online. Dlatego ważne jest, abyś wiedział, co robisz, dodając filmy do swojej witryny. Jeśli zdecydujesz się użyć wideo w swojej witrynie, Divi sprawi, że proces będzie niezwykle prosty, zapewniając rozwiązanie dla wielu przeglądarek dla filmów z własnym hostingiem i wygodne rozwiązanie do osadzania stron trzecich. Ale Divi nie może zrobić dla ciebie wszystkiego. Mam nadzieję, że ten post pomoże Ci w wyborze odpowiedniego filmu i przygotowaniu go do sieci.

Czekam na kontakt z Państwem w komentarzach.