Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [JavaScript][AJAX][PHP] Odtwarzanie mp4 w tle, wymiana fragmentu kodu
shpaque
post 15.08.2017, 11:43:48
Post #1





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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?

Ten post edytował shpaque 15.08.2017, 11:58:03
Go to the top of the page
+Quote Post
nospor
post 15.08.2017, 12:14:49
Post #2





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




Czemu nie mozesz tego html wygenerowac poprawnie jeszcze na poziomie php?


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 15.08.2017, 12:17:02
Post #3





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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;


Ten post edytował shpaque 15.08.2017, 12:25:16
Go to the top of the page
+Quote Post
nospor
post 15.08.2017, 12:22:55
Post #4





Grupa: Moderatorzy
Postów: 36 557
Pomógł: 6315
Dołączył: 27.12.2004




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...


--------------------

"Myśl, myśl, myśl..." - Kubuś Puchatek || "Manual, manual, manual..." - Kubuś Programista
"Szukaj, szukaj, szukaj..." - Kubuś Odkrywca || "Debuguj, debuguj, debuguj..." - Kubuś Developer

Go to the top of the page
+Quote Post
shpaque
post 15.08.2017, 13:21:19
Post #5





Grupa: Zarejestrowani
Postów: 651
Pomógł: 3
Dołączył: 31.01.2011
Skąd: Warszawa

Ostrzeżenie: (10%)
X----


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.

Ten post edytował shpaque 15.08.2017, 14:34:35
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 17.05.2025 - 14:15