|
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. |
demo |
|---|
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.
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:
Krok 5.
Dodajemy CSS.
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>
<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">
<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;}
#HTML1 { position:absolute; width: 100%; top: 0px; left:0%; z-index: -2;}
Subskrybuj:
Komentarze do posta (Atom)
Z czymś takim się nie spotkałam.
OdpowiedzUsuń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
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ńWow świetny bajer. Kiedyś może z tej instrukcji skorzystam. ;D
OdpowiedzUsuń