achtergrond filmpje speelt niet af in firefox en chrome

Status
Niet open voor verdere reacties.
R

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Ben ik weer...

Hier staat op de achtergrond van de indexpagina een filmpje https://met-rob.com/drijfijzer2/

In de browser safari is het filmpje te zien.

Maar als ik kijk in firefox of chrome op mijn apple is de achtergrond gewoon zwart.
Op mijn android telefoon is de achtergrond ook gewoon zwart.

Blokkeren Firefox en Chrome filmpjes??
Is dat te omzeilen?

Of is er iets mis in de css?
Hier de code:
Code: 
#bg {
		-moz-transform: scale(1.0);
		-webkit-transform: scale(1.0);
		-ms-transform: scale(1.0);
		transform: scale(1.0);
		-webkit-backface-visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

		#bg:before, #bg:after {
			content: '';
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}

		#bg:before {
			-moz-transition: background-color 2.5s ease-in-out;
			-webkit-transition: background-color 2.5s ease-in-out;
			-ms-transition: background-color 2.5s ease-in-out;
			transition: background-color 2.5s ease-in-out;
			-moz-transition-delay: 0.75s;
			-webkit-transition-delay: 0.75s;
			-ms-transition-delay: 0.75s;
			transition-delay: 0.75s;
			background-image: linear-gradient(to top, rgba(19, 21, 25, 0.5), rgba(19, 21, 25, 0.5)), url("../../images/overlay.png");
			background-size: auto,
 256px 256px;
			background-position: center,
 center;
			background-repeat: no-repeat,
 repeat;
			z-index: 2;
		}

		#bg:after {
			-moz-transform: scale(1.125);
			-webkit-transform: scale(1.125);
			-ms-transform: scale(1.125);
			transform: scale(1.125);
			-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
			-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
			-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
			background-image: url("../../images/water.mp4");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			z-index: 1;
		}

		body.is-article-visible #bg:after {
			-moz-transform: scale(1.0825);
			-webkit-transform: scale(1.0825);
			-ms-transform: scale(1.0825);
			transform: scale(1.0825);
			-moz-filter: blur(0.2rem);
			-webkit-filter: blur(0.2rem);
			-ms-filter: blur(0.2rem);
			filter: blur(0.2rem);
		}

		body.is-preload #bg:before {
			background-color: #000000;
		}
 
-webkit-backface-visibility: hidden;

Haal dit er eens uit?
 
Code: 
#bg {
        -moz-transform: scale(1.0);
        -webkit-transform: scale(1.0);
        -ms-transform: scale(1.0);
        transform: scale(1.0);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 1;
}

Eruit gehaald, geen succes
 
Laatst bewerkt door een moderator:
Dit is de originele template: https://html5up.net/dimension

Die staat nu hier: https://met-rob.com/drijfijzer3/

het stukje css waar de achtergrond foto wordt geregeld ziet er zo uit:
Code: 
#bg:after {
			-moz-transform: scale(1.125);
			-webkit-transform: scale(1.125);
			-ms-transform: scale(1.125);
			transform: scale(1.125);
			-moz-transition: -moz-transform 0.325s ease-in-out, -moz-filter 0.325s ease-in-out;
			-webkit-transition: -webkit-transform 0.325s ease-in-out, -webkit-filter 0.325s ease-in-out;
			-ms-transition: -ms-transform 0.325s ease-in-out, -ms-filter 0.325s ease-in-out;
			transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
			background-image: url("../../images/bg.jpg");
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			z-index: 1;
		}

Nu zie je de achtergrondfoto wel in firefox en chrome

Het enige wat ik veranderd heb is deze regel:
background-image: url("../../images/bg.jpg");

Dat heb ik veranderd in:
background-image: url("../../images/water.mp4");
 
Grappig, je kan dus gewoon een mp4-bestand afspelen via een background-image.
Nooit geweten.

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp
Dus is misschien wel beter geweest. Dan kan je er ook meer aansturing in aanbrengen.
Niet iedereen is gecharmeerd van bewegende video's achter achtergrond, dus kan je een knop maken om de video te pauseren.
 
Laatst bewerkt:
Ik snap nog steeds niet waarom het in safari wel werkt en in firefox en chrome niet.

Die link die je stuurde is om een full screen video te kunnen maken.

Maar wie zegt dat deze dan wel werkt in safari en chrome.

Er staan nu in de css van de "bg" zoveel verschillende dingen ingesteld.
Als ik de tutorial van jouw link ga volgen, moet ik het ook nog voor elkaar zien te krijgen dat deze op de achtergrond komt en niet bovenop.

En dat er verder niks veranderd aan de originele template.

En ik denk dat dat mijn pet WEER te boven zal gaan.
 
background-image: url("../../images/water.mp4");
Klik om te vergroten...
Haha, echt een safari dingetje.
Een video als background-image kan/zal nooit cross-browser zijn/worden :D :D
 
En als ik een "gif" zou kunnen bemachtigen van kabbelend water.

Zou dit dan wel werken?
 
rob1970 zei:
Ik snap nog steeds niet waarom het in safari wel werkt en in firefox en chrome niet.
Klik om te vergroten...
Edge en Internet Explorer 11 ook niet. Je kunt beter een lijstje van browsers maken waar het wél werkte :).
 
rob1970 zei:
En als ik een "gif" zou kunnen bemachtigen van kabbelend water.

Zou dit dan wel werken?
Klik om te vergroten...

Dat zou dan wel werken.
Maar waarom is mijn oplossing niet goed dan? Werkt cross-browser.
 
Ik ga jouw oplossing nog wel proberen.

Maar dan heb ik alleen een pagina met een video. Dan moet ik de rest van de template daar nog werkend in zien te krijgen.

En ik ken mijn kwaliteiten maar zeker ook mijn beperkingen.

Wordt vervolgd. Moet nu de deur uit.
 
rob1970 zei:
Ik ga jouw oplossing nog wel proberen.

Maar dan heb ik alleen een pagina met een video. Dan moet ik de rest van de template daar nog werkend in zien te krijgen.

En ik ken mijn kwaliteiten maar zeker ook mijn beperkingen.

Wordt vervolgd. Moet nu de deur uit.
Klik om te vergroten...

De code is echt simpel, dus het valt eenvoudig in te bouwen.
 
te vroeg gejuichd - iphone speelt niet af

Ik heb de pagina met filmpje getest op mijn imac in de browsers, safari, chrome en firefox.
werkt allemaal prima.

Ook op mijn android telefoon gekeken
werkt ook prima.

Nu appte mijn klant net dat het op zijn iphone niet werkt.
Hij heeft op zijn iphone safari en chrome geprobeerd.
werkt allebei niet.


heeft iemand een iphone en zou die kunnen kijken?
Ik heb geen idee hoe dit kan.
 
Hoe heb je het nu geïmplementeerd? Via de video-tag?
 
Dit is een cross-browser oplossing voor de video tag.
Code: 
<video autoplay muted loop id="myVideo">
  <source src="images/water.mp4"  type="video/mp4">
  <source src="images/water.webm" type="video/webm">
  <source src="images/water.ogg"  type="video/ogg">
</video>

De middelste source regel (webm) is waarschijnlijk niet nodig voor iPhone/iPad.


Update: iPhone kan probleemloos mp4, m4v en mov afspelen maar dan moet de compressie H.264 of mpeg-4 zijn. Je kan googelen naar een online mp4 naar mp4/H.264 converter. Probeer mp4 te gebruiken want dat is momenteel "de standaard", zie deze site . De webm is het nieuwe formaat die mp4 zal gaan vervangen maar persoonlijk zou ik nu kiezen voor mp4/H.264.

Update 2: Veel info (klik) over website video op een iPhone/iPad.
 
Laatst bewerkt:
Als ik kies voor de optie H.264 (zie het rijtje met opties in het screenshot) maakt hij er een avi bestand van.

Is dat wel de bedoeling?

Ook gaat het filmpje dan van 13 mb naar 40 mb
 

Bijlagen

  • Schermafbeelding 2021-04-02 om 16.48.48.png
    Schermafbeelding 2021-04-02 om 16.48.48.png
    132,3 KB · Weergaven: 13
heb nu via het programma "handbrake" misschien gevonden wat ik nu zoek.

Hier staat aan de linkerkant: "video encoder H.264"

En dan kan ik hem opslaan als mp4 bestand.

Ik denk dat dit wel goed moet zijn.

Dan gaat het filmpje ook van 13 naar 9 mb
 

Bijlagen

  • Schermafbeelding 2021-04-02 om 16.54.35.png
    Schermafbeelding 2021-04-02 om 16.54.35.png
    113,9 KB · Weergaven: 15
Laatst bewerkt:
let er wel op dat filmpjes niet altijd even gewenst zijn als achtergrond.
Iemand met een kleine databundel laag je snel op de kosten.
 
Heb ik ook al gezegd tegen mijn klant. Maar ze willen het toch zo hebben.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan