achtergrond filmpje speelt niet af in firefox en chrome

Status
Niet open voor verdere reacties.
Iemand met een kleine databundel laag je snel op de kosten.
Aanvulling: iemand met een lage wifi snelheid heeft geen zin in wachten(video buffering) en die "potentiele klant" ben je kwijt.

Je zou nog kunnen kijken of je met een lagere resolutie en/of minder frames/sec het aantal MB's kan verminderen. Het zijn bewegende golven dan is scherpte minder van belang.
 
De websites staan inmiddels online.
Hier staat een voorbeeld op mijn eigen server: https://met-rob.com/drijfijzer2/
Het vreemde is nu dat het achtergrondfilmpje in alle browsers afspeelt, ook op een android telefoon en ook op een ipad speelt hij af.
Alleen op een iphone weigert het filmpje af te spelen.

Heb van alles geprobeerd. Ook via het programma handbrake hadden ze een instelling speciaal voor apple (zie screenshot)
Dan werd het een m4v bestand
Ook met dit soort video speelt het filmpje overal af, behalve op een iphone.
dus wel op de ipad, maar niet op een iphone.

je zou toch zeggen dat deze gebruik maken van dezelfde technologie.

De IPhone waarop gekeken wordt is een nieuwe, de iPad is een oud model. Kan dat nog wat uitmaken?

Bekijk bijlage 357059
 
Laatst bewerkt:
Wat betreft het video formaat is Apple vrij strak en het verschilt per iPhone/iPad model hoe flexibel het is. Lees het antwoord even bij dit artikel, misschien kan je dan verder.
 
ik ben er bijna

Het filmpje doet het nu ook op een iphone.
Het enige is nu nog dat het filmpje zich blijft herhalen.
Dat is alleen op een iphone het geval.

Ik heb om het filmpje erachter te krijgen in eerste instantie deze link gevolgd: https://www.w3schools.com/howto/howt...reen_video.asp

Daar stond deze code:
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>

Hier heb ik het woordje "loop" weggehaald zodat de video in alle browsers afspeelt to het einde en dan stopt.


Nu komt het iphone verhaal:
In de oorspronkelijke code stond dit:
background-image: url("../../images/bg.jpg");

Hier de complete code die de bg regelt:
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;
	}

		#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/water6.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;
		}



Ik had deze regel verwijderd uit de code:
background-image: url("../../images/bg.jpg");
Dit omdat de achtergrond image immers werd vervangen door het filmpje

Nu heb ik deze regel vervangen door:
background-image: url("../../images/water6.mp4");

En nu speelt het achtergrondfilmpje wel af op een iphone.
Zoals PHP4U al zei: "Grappig, je kan dus gewoon een mp4-bestand afspelen via een background-image.
Nooit geweten."

Dus in alle normale browers zorgt deze code ervoor dat het fimpje wordt afgespeeld.
<video autoplay muted loop id="myVideo">
<source src="rain.mp4" type="video/mp4">
</video>


En op een iphone zorgt dit ervoor dat het fimpje wordt afgespeeld:
background-image: url("../../images/water6.mp4");

Dus tot zover is het een succes te noemen.


Het allerlaatste wat ik zou willen is dat ook hier ergens iets toegevoegd moet worden waardoor het filmpje niet elke keer opnieuw begint maar stopt op het einde.
In de code staat wel: background-repeat: no-repeat;
Maar hier schijnt het filmpje zich niets van aan te trekken


Ik hoop dat iemand raad weet
 
Laatst bewerkt:
Nu heb ik deze regel vervangen door:
background-image: url("../../images/water6.mp4");
image betekent afbeelding, video betekent filmpje :) :)
Je kan in de css de background-image weghalen omdat je in de html een <video> tag hebt staan.

Ik denk zelfs dat je heel veel tussen /* en */ kan zetten zodat het niet meer van invloed is.
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;
}


#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/xxxxxxxx.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    */
    z-index: 1;
}

Even testen of alle effecten op de pagina dan werken. Eventueel weer enkele /* */ weghalen als iets niet meer werkt.
 
Laatst bewerkt:
Nu heb jij hier de video weer weg gehaald.
url("../../images/xxxxxxxx.jpg")

Door hier de video te plaatsen zorgde er nu net voor dat de video werd afgespeeld op een iPhone
 
Die HTML video tag zorgt ervoor dat de video in alle browsers wordt afgespeeld..

Dat images/water6.mp4 zorgt ervoor dat hij ook op een iPhone wordt afgespeeld.

Ik heb ze allebei nodig
 
zou dit kunnen werken?

Het filpmje eindigt met een blauwe lucht.
Ik heb nu een afbeelding van die blauwe lucht.

Kan het in de css ingesteld worden dat deze blauwe lucht verschijnt over het filmpje heen na 14 seconden?

Het filmpje duurt namelijk 14 seconden.
Als de afbeelding "lucht.png" na 14 seconden over het filmpje heen wordt gezet, is de website op een iphone ook zoals deze zou moeten zijn.

lucht.png


Of het volgende:
In de css staat nu bij "bg before" ook een afbeelding "overlay.png"
Als ik de afbeelding van de lucht nu eens "overlay.png" noem en er voor zorg dat deze "overlay" pas na 14 seconden in beeld verschijnt.
Dan ben ik ook waar ik zijn moet volgens mij.

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;
	}

		#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/water7.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;
		}

heb dat zelf al geprobeerd door al deze waarden (-moz-transition-delay: 0.75s;) te veranderen van 0,75s naar 14s
maar dat werkte helaas niet
 
Laatst bewerkt:
Het filmpje duurt namelijk 14 seconden.
De tijd kan je niet van tevoren bepalen. Dit heeft met de buffertijd van het video bestand te maken. Iemand die op een lan kabeltje zit heeft de video in korte tijd op z'n scherm maar bij iemand die draadloos 10 meter van de wifi router zit duurt het langer. Het is te doen met het Javascript Video Event "ended" maar je hebt het probleem dat je ook background-image gebruikt die dit event niet kan triggeren.
 
Laatst bewerkt:
opgelost

Deze code:
Code:
<video autoplay muted id="myVideo">
  <source src="images/water6.mp4" type="Video/Mp4">
</video>

is veranderd in dit:
Code:
<video playsinline="" autoplay muted="" tabindex="0" id="myVideo">
  <source src="images/water6.mp4" type="Video/Mp4">
</video>

en nu werkt het


mod. code tags toegevoegd (drukknopje CODE)
 
Laatst bewerkt door een moderator:
Vraag: ik heb begrepen dat autoplay + playsinline op de nieuwere iPhones niet werkt als "Low power mode" aan staat (bij veel iPhones staat dit standaard aan).
Weet jij of dit klopt?
 
Laatst bewerkt:
Ik heb geen idee. Heb zelf ook geen iPhone en kan het dus ook niet testen.
 
Het werkt nu, alhoewel je het niet kan testen op alle iPhone modellen. Eventueel, als je zin hebt, kan je dit nog testen zodat je een fallback hebt als een video niet kan worden afgespeeld.
Code:
<div id="videoFallback">
  <video playsinline autoplay muted tabindex="0" id="myVideo">
    <source src="images/water6.mp4" type="video/mp4">
  </video>
  <img src="images/water6.jpg" alt="">
</div>

Als een iPhone wel een video kan afspelen dan wordt de video weergegeven. Als een iPhone geen video kan afspelen dan zorgt deze css ervoor dat een JPG wordt getoond ipv de video.
Code:
@supports (-webkit-touch-callout: none) {
  #videoFallback video {
    display: none;
  }
}
@media (-webkit-video-playable-inline) {
  #videoFallback img {
    display: none;
  }
  #videoFallback video {
    display: initial;
  }
}
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan