[Wordpress] Videobackground werkt niet goed.

[Badmeerkoet]

Hey iedereen,

Ik zit met een raar probleem op een Wordpress website waar ik niet uit kom. Ik hoop met jullie hulp dat iemand mij een tip kan geven waar ik verder mee kom.

Ik ben vanaf 0 een nieuwe website aan het bouwen voor mijn bedrijf en heb besloten om een zelf gehoste videobackground in de header te zetten die op autoplay staat. Uiteraard heeft de video geen audio. Het is een mp4 video (h264) van 20 sec die loopt. Dit om de website echt "tot leven" te laten komen. Dat videobackground op autoplay eventueel ten koste gaat van een SEO score neem ik voor lief. Op de desktop werkt dit allemaal prima en zover ik kan zien op de tablet ook. Op mijn iPhone gaat het echter mis, al treed het probleem niet altijd op (en dat is dus juist het meest irritante eraan).

Op mijn iPhone speelt de videobackground meestal gewoon prima af echter soms om een reden die ik tot dusver niet kan vinden dus niet. Ik krijg een playbutton te zien welke ik overigens niet aan kan zetten. De tijden en hoe lang het niet werkt is altijd weer verschillend. Soms is het een half uur, soms is het bijna een hele dag.

Mijn eerste gedachte ging uit naar iets van caching. Ik heb echter al geprobeerd om alle cache opties zowel op de website als server-side uit te zetten. Dit had helaas niet het gewenste effect. Het probleem bleef bestaan.

Vervolgens alle plugins uitgeschakeld behalve Elementor. Het probleem bleef bestaan. Dit geeft mij aan dat het probleem wellicht te maken heeft met Elementor maar zeker weten doe ik het niet. Andere plugins lijken in ieder geval uitgesloten.

Ik heb geprobeerd om mijn iPhone aan te sluiten op mijn MacBook en met safari te kijken met inspect element. Helaas werkt dat niet zoals ik online lees dat het zou moeten werken en kom ik dus niet verder hiermee.

Wellicht dat iemand hier tips heeft?

[ Voor 20% gewijzigd door Badmeerkoet op 23-05-2021 07:03 ]

[DJMaze]

Niet elk apparaat ondersteund h264.
Gebruik je soms <video> met meerdere sources (webm, mkv, etc.)?

[ Voor 19% gewijzigd door DJMaze op 20-10-2020 21:15 ]

[Badmeerkoet]

Ik dacht dat h264 inmiddels wel aardig ondersteund wordt. H265 is lastiger weet ik. Maar dan is het nog gek dat hij het soms wel en soms niet doet.

Nee het is 1 Videosource en dat is een MP4 bestand.

[Spinal]

DJMaze schreef op dinsdag 20 oktober 2020 @ 21:13:
Niet elk apparaat ondersteund h264.
Gebruik je soms <video> met meerdere sources (webm, mkv, etc.)?

Volgens Caniuse wordt h264 overal ondersteund.

Elite-Mind schreef op dinsdag 20 oktober 2020 @ 22:15:
Nee het is 1 Videosource en dat is een MP4 bestand.

MP4 zegt alleen niks over de gebruikte codec...

[Comp-Freak]

Totaal niet mijn vakgebied, maar is het niet gewoon de browser die de video niet wil afspelen om data of batterij te besparen? Dan kan je je dus afvragen of je bij het testen bijvoorbeeld altijd verbonden bent met wifi of een oplader. Ik neem aan dat zoiets voor de browser in kwestie ook wel gedocumenteerd moet zijn ergens?

[Badmeerkoet]

Comp-Freak schreef op woensdag 21 oktober 2020 @ 11:45:
Totaal niet mijn vakgebied, maar is het niet gewoon de browser die de video niet wil afspelen om data of batterij te besparen? Dan kan je je dus afvragen of je bij het testen bijvoorbeeld altijd verbonden bent met wifi of een oplader. Ik neem aan dat zoiets voor de browser in kwestie ook wel gedocumenteerd moet zijn ergens?

Is wel iets om te testen inderdaad!

[TwArbo]

Ik heb geprobeerd om mijn iPhone aan te sluiten op mijn MacBook en met safari te kijken met inspect element. Helaas werkt dat niet zoals ik online lees dat het zou moeten werken en kom ik dus niet verder hiermee.

Hoe heb je dit geprobeerd? Ik doe het altijd door de iPhone direct aan mijn laptop aan te sluiten. Safari opstarten op de Macbook (developer tools moet enabled zijn) en dan in het menu "Develop" kan ik dan mijn iPhone aanklikken (je moet op je iPhone aangeven dat de computer vertrouwt is). De eerste keer connecten kan even lang duren. Ik sluit Safari dan altijd even af op mijn iPhone en zet hem opnieuw aan.

Heb je al eens geprobeerd om te spelen met de <video> tag attributen? Zie: https://developer.mozilla...cs/Web/HTML/Element/video. Wellicht is playsinline de oplossing. Of de muted tag toevoegen (ook al heeft het filmpje geen geluid).

In some browsers (e.g. Chrome 70.0) autoplay doesn't work if no muted attribute is present.

[ Voor 10% gewijzigd door TwArbo op 21-10-2020 14:47 ]

[Badmeerkoet]

TwArbo schreef op woensdag 21 oktober 2020 @ 14:43:
[...]


Hoe heb je dit geprobeerd? Ik doe het altijd door de iPhone direct aan mijn laptop aan te sluiten. Safari opstarten op de Macbook (developer tools moet enabled zijn) en dan in het menu "Develop" kan ik dan mijn iPhone aanklikken (je moet op je iPhone aangeven dat de computer vertrouwt is). De eerste keer connecten kan even lang duren. Ik sluit Safari dan altijd even af op mijn iPhone en zet hem opnieuw aan.

Heb je al eens geprobeerd om te spelen met de <video> tag attributen? Zie: https://developer.mozilla...cs/Web/HTML/Element/video. Wellicht is playsinline de oplossing. Of de muted tag toevoegen (ook al heeft het filmpje geen geluid).


[...]

Ik heb het precies zoals jij aangeeft geprobeerd. Hij ziet m'n iPhone wel maar geeft aan dat er geen tabbladen zijn om te inspecteren.

Heb er verder nog niet veel mee gedaan omdat hij het soms wel en soms niet doet. Overigens is dat altijd zowel in safari als in Chrome het geval. Nu ligt dat op de iPhone natuurlijk anders omdat ze volgens mij van dezelfde engine gebruik maken.

Ik ga er nog eens induiken. Bedankt in ieder geval voor de reacties zo ver!

[Badmeerkoet]

Comp-Freak schreef op woensdag 21 oktober 2020 @ 11:45:
Totaal niet mijn vakgebied, maar is het niet gewoon de browser die de video niet wil afspelen om data of batterij te besparen? Dan kan je je dus afvragen of je bij het testen bijvoorbeeld altijd verbonden bent met wifi of een oplader. Ik neem aan dat zoiets voor de browser in kwestie ook wel gedocumenteerd moet zijn ergens?

Ondanks dat je antwoord niet helemaal correct was ben ik er inmiddels achter waar het aan lag dankzij je tip.

Als de iPhone in energiebesparingsmodus wordt gezet speelt hij de video niet af. In normale modus wel. Nooit bij stil gestaan! Probleem opgelost dus!

[DJMaze]

Spinal schreef op woensdag 21 oktober 2020 @ 09:08:
Volgens Caniuse wordt h264 overal ondersteund.

Bijna overal met mitsen en maren (zoals gstreamer plugin op Linux).

Ik transcode altijd en gebruik mijn nvidia kaart als hardwarematige converter.
Blijken video's opeens een heel stuk kleiner te kunnen. Je moet ook op versie letten als je bijv. PS3 wil ondersteunen (hier niet het geval).