katalog grafików
katalog granger
katalogowo
konstruktywna krytyka blogów
Mara-senpai

Co będzie?

  • Aktualizacja instrukcji 0/15
  • Simple Dark szablon
  • Simple Magic szablon

Witajcie na odnowionej stronie Rinne Lasair!

Nowa strona już jest, ale nadal czeka na kilka poprawek.

zobacz post

Nowy szablon Simple Magic już wkrótce!

Już niedługo pojawi się nowy szablon Simple Magic, który będzie zawierał możliwość dodania video na stronie startowej oraz będzie go można dowolnie edytować przez projektanta.

Zajrzyj do sklepu!

Rinne Lasair posiada teraz własny, oficjalny sklep. Znajdziecie tam również darmówki do pobrania!

przjedź do sklepu
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ń

Facebook

Kontakt

W sprawie współpracy lub pytań/pomocy rinne.lasair@gmail.com
W sprawach dotyczących zamówień lub sklepu/produktów noskowicz.klaudia@gmail.com
W każdej sprawie można również pisać na facebooka
Numer konta bankowego do przelewów: 96 1020 5558 0000 8802 3176 1645

Dodatkowe informacje

Cennik, Usługi, FAQ oraz formularz kontaktowy znajdują się na stronie głównej.
Portfolio jest na chwilę obecną niedostępne.