Komercyjnie
noskowicz.klaudia@gmail.com

lub

Potrzebujesz w czymś pomocy lub chcesz napisać w sprawie współpracy?
rinne.lasair@gmail.com

Rinne ☽ Lasair
Klaudia ☾ Noskowicz

20.11 Skorpion ♏ | Gryfon | 165cm | Optymista

❤ DGD ~ Koty ~ BDO ~ Kosmos ~ Burza ~ Anime
💔 Horrory ~ Spoilery

Responsywne szablony na witrynę blogspot, loga, grafika 3d, animacje oraz tutoriale.

Główna Portfolio Blog
O mnie
Kontakt
+

Co będzie?

  • Burning moon 3d
  • Szablon do opowiadań
  • Szablon Reaper darmówka
  • Szablon RPG

Szukaj

Video w tle

Zapewne przemierzając internety trafiliście na strony, gdzie w tle odtwarzało się jakieś video. Osobiście spotykałam się z tym często i stwierdziłam, że też chcę coś takiego.
Wyjaśnię wam, jak dodać video na bloga, ale również jak w ogóle je ściągnąć i przerobić, by można je było umieścić na stronie.

Krok 1.
Na samym początku należy znaleźć i pobrać video, które chcecie umieścić na swojej stronie. Pamiętajcie, że im krótszy filmik tym lepiej. Polecam filmy z youtuba, ponieważ w bardzo prosty sposób można je pobrać, używając świetnego programu YTD Video Downloader lub videezy.com Jeżeli jednak sam stworzyłeś swój film, masz ułatwiony sposób, nie musisz niczego ściągać.

Krok 2.
Aby umieścić film na stronie internetowej, musi on posiadać odpowiedni format. Nie musimy ściągać żadnego programu, do zmiany posłuży nam ta strona: video.online-convert.com. Istnieją trzy formaty: mp3, ogg, webm - ja wybrałam ten ostatni.

Krok 3.
Gdy mamy już przekonwertowany film, musimy go umieścić na jakimś hostingu, żeby uzyskać link. Ja użyłam do tego tej strony: webm.land. W prawym górnym rogu znajduje się przycisk upload. Wasz link znajdzie się po załadowaniu pod video: "Direct link: webm.land/media/cośtam.webm"

Krok 4. 
Wbijamy na naszego bloga, wchodzimy w układ i dodajemy gadżet HTML/JS.

<div id="video">
<video autoplay="autoplay" loop="loop" muted controls style="max-width: none; width: 100%;">
<source src="adres waszego video" type="video/webm">
</source>
</video>
</div>


Autoplay - video włączy się od razu automatycznie.
Loop - video będzie zapętlone, czyli będzie się powtarzać.
Muted - dźwięk będzie wyciszony. Jeżeli jednak chcesz mieć głos, po prostu usuń ten fragment.
Controls - polecam to usunąć, ten fragment pozwala na zatrzymanie video po kliknięciu na nie. 

Jeżeli chcesz, żeby odtwarzało się więcej niż jedno video, dodaj po prostu kolejny link:
<source src="adres waszego video #1" type="video/webm">
<source src="adres waszego video #2" type="video/webm">

Krok 5.
Dodajemy CSS.

#video { width: 100%; left: 0%; z-index: -2; }
#HTML1 { position:absolute; width: 100%; top: 0px; left:0%; z-index: -2;}

3 komentarze:

  1. Z czymś takim się nie spotkałam.
    Fajne to. W dobrej jakości się odtwarzają te filmiki? Bo na podglądzie troszkę pikseloza i się zastanawiam czy to zależne bezpośrednio od tego jaki jest video... :D

    OdpowiedzUsuń
    Odpowiedzi
    1. Jak robiłam główny na RT to najpierw dawałam dwa filmy i chociaż jakość troszkę spadała, to mimo wszystko nie było pikselozy. Natomiast mój księżyc miał zwaloną jakość, sama go cięłam, bo był za długi, więc skończyło się tak, że jakość mu bardzo spadła xD Zmienię ten filmik w demo, żeby nie straszyć ludzi, ale to wiesz... potem xD

      Usuń
  2. Wow świetny bajer. Kiedyś może z tej instrukcji skorzystam. ;D

    OdpowiedzUsuń

by Rinne Lasair | credits: helplogger