Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX][PHP] Odtwarzanie mp4 w tle
Forum PHP.pl > Forum > Przedszkole
shpaque
Witam serdecznie, szukałem, ale konkretnie tego tematu nie znalazłem, więc piszę.

Jak wiadomo coraz więcej stron odtwarza w module "hero" w tle pliki video. Jak zrobić, żeby moj video background był odtwarzany w formacie mp4 wszedzie, a nie tylko w safari?

mam to zrobione po prostu tak
  1. <div class="video-bg-container">
  2. <video class="bloc-video" preload="auto" loop="loop" autoplay="autoplay">
  3. <source src="vid/woda.mp4" type="video/mp4" />
  4. </video>
  5. </div>


w css nie wiem czy to wazne, jest tak

  1. .video-bg-container, .bloc-video{
  2. position: absolute;
  3. top: 0;
  4. bottom: 0;
  5. left: 50%;
  6. right: -50%;
  7. overflow: hidden;
  8. transform: translateX(-50%);
  9. -webkit-transform:translateX(-50%);
  10. }
  11. .bloc-video{
  12. width: auto;
  13. height: auto;
  14. min-width: 100%;
  15. min-height: 100%;
  16. z-index: 0;
  17. }


@edit


To może ugryźmy to inaczej. Program wrzuca jedynie pliki mp4, ktore jak wiemy nie ciagna wszystkie przeglądarki. Znalazlem pewne rozwiazanie, ale przy generowaniu strony program oczywiscie wygeneruje kod, w ktorym będzie wycinek:
  1. <video class="bloc-video" preload="auto" loop="loop" autoplay="autoplay">
  2. <source src="vid/water.mp4" type="video/mp4" />
  3. </video>


jak zrobic (jQuery pewnie) zeby w locie przy generowaniu strony, czyli gdzies skryptem na dole strony - żeby pozmienil mi kod z powyzszego na:
  1. <video class="bloc-video" preload="auto" loop="loop" autoplay="autoplay">
  2. <source src="vid/water.ogg" type="video/ogg" />
  3. <source src="vid/water.webm" type="video/webm" />
  4. <source src="vid/water.mp4" type="video/mp4" />
  5. </video>



czyli inaczej jak zrobic funkcja jQuery (lub jak inaczej) zeby w czasie ladowania strony podmienic czesc kodu?
nospor
Czemu nie mozesz tego html wygenerowac poprawnie jeszcze na poziomie php?
shpaque
bo nie chce przy kazdym wygenerowaniu strony pamietac zeby edytowac kod, wolalbym po prostu generujac caly web miec wszystko tak zrobione zeby juz nie edytowac gotowych podstron, a program nie umozliwia edycji kodu, a jedynie dodanie gdzies w tresci kodu lub w naglowku lub w stopie



mam tak: i dlaczego nie dziala?

  1. function zamianaKodu() {
  2. var kod = '<source src="vid/water.ogg" type="video/ogg" />';
  3. kod = str.replace('<source src="vid/water.ogg" type="video/ogg" />', '<source src="vid/water.webm" type="video/webm" /> <source src="vid/water.mp4" type="video/mp4" /> <source src="vid/water.mp4" type="video/mp4" />');
  4. }
  5. window.onload = zamianaKodu;
nospor
Ja nie mowilem o recznej edycji kazdej strony... Ja mowilem o automacie.

Moze napisz w koncu co to za "magiczny" program i czy w ogole przechodzi to przez php...
shpaque
blocs - tak jak napisalem powyzej - generalnie chyba mniej wiecej o to mi chodzi ale nie wiem dlaczego nie dziala (jest w headzie calosc)


oj juz pochrzanilem wszystko, chodzi mi o to:

  1. function zamianaKodu() {
  2. var kod = '<source src="vid/water.mp4" type="video/mp4" />';
  3. kod = str.replace('<source src="vid/water.mp4" type="video/mp4" />', '<source src="vid/water.ogg" type="video/ogg" /> <source src="vid/water.webm" type="video/webm" /> <source src="vid/water.mp4" type="video/mp4" />');
  4. }
  5. window.onload = zamianaKodu;


@edit

tak jak myslalem, udalo sie jQuery, ale dodaje mi na stronie we "wklejonym" odcinku cudzyslowy na poczatku i koncu - jak to wyeliminowac?

  1. $(function(){
  2. $(".bloc-video").text('<source src="vid/water.ogg" type="video/ogg" /> <source src="vid/water.webm" type="video/webm" /> <source src="vid/water.mp4" type="video/mp4" />');
  3. });


https://www.dropbox.com/s/in9uzv7a2tvrd8x/replaced.jpg?dl=0


@edit 2

i już załatwione "dziękuję" za ogromną pomoc. Chodziło nie o "text" tylko "replaceWith"

teraz prawidłowo wygląda to tak:
  1. $(function(){
  2. $(".bloc-video").replaceWith('<video class="bloc-video" preload="auto" loop="loop" autoplay="autoplay">\n<source src="vid/water.ogg" type="video/ogg" />\n<source src="vid/water.webm" type="video/webm" />\n<source src="vid/water.mp4" type="video/mp4" /></video>');
  3. });


temat do zamknięcia.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.