[HTML5] Video met fallback naar gif

[tom.cx]

Hoi,

Ik ben een kleine site met gifs aan het maken die ik zelf host. Om er voor te dat ik dataverkeer kan besparen heb ik van alle gifs een mp4 gemaakt. Dit scheelt aanzienlijk in dataverkeer. Echter wil ik naast .mp4 ook een terugvall naar .gif als de html5 video niet ondersteund wordt. Wat er nu echter gebeurd is dat hij de poster, de mp4 en de gif binnen haald. Zowel op desktops als smartphones (volgens webpagespeed.org maar ook na zelf testen zie stuk hier onder).

Hier onder staan twee netwerk checks vanuit FireFox. Waarbij te zien is dat hij de eerste keer alles binnen harkt en de tweede keer alles uit de cache haalt. Wat prima is. Alleen vindt ik het wel vreemd dat hij bij de eerste keer in de tijdlijn de .mp4's niet laat zien. De tweede keer wel. Daarnaast zie je ook dat hij de eerste keer de gifs binnen haalt



Onderstaande code snip gebruik ik voor de weergave embed van de mp4's en gifs.

code:

    <div class="gallery">
        <a target="_blank" href="gifs/voorbeeld.gif">
      <video width="300" poster="img/voorbeeld.png" playsinline autoplay muted loop>
          <source src="mp4/voorbeeld.mp4" type="video/mp4">
          <img src="gifs/voorbeeld.gif" alt="Tim confetti party boss">
      </video>

  <div class="desc">voorbeeldtekst</a></div>
    </div>

Kort door de bocht: Hoe voorkom ik dat hij onnodig de gifs laad. Dat is niet de bedoeling als mp4 werkt. Ik gebruik verder alleen CSS opmaak, geen php, (externe) lettertypes, (externe) scripts).

Dit heb ik al geprobeerd maar de poster="img/twaekers.png" voorkomt het dus niet.

[q-enf0rcer.1]

Hier is de oplossing te lezen(zie het voorbeeld op deze pagina):

https://developer.mozilla...PI/HTMLMediaElement/error

[ Voor 22% gewijzigd door q-enf0rcer.1 op 04-08-2018 08:38 ]

[HollowGamer]

Begrijp ik goed dat je zelfs meerdere formaten gebruikt: png, gif en mp4?

Je zou namelijk als poster ook de gif kunnen gebruiken en de source in een error zoals @q-enf0rcer.1 al aangeeft.

Heb je echt nog browsers die HTML5 video niet ondersteunen? Of bedoel je de video codec(s)?

Een mp4 is normaal velen malen groter dan een gif. Hoe bedoel je dit precies met het besparen van data?

[ Voor 15% gewijzigd door HollowGamer op 04-08-2018 09:00 ]

[tom.cx]

q-enf0rcer.1 schreef op zaterdag 4 augustus 2018 @ 08:31:
Hier is de oplossing te lezen(zie het voorbeeld op deze pagina):

https://developer.mozilla...PI/HTMLMediaElement/error

Sorry, maar ik snap deze oplossing niet. Misschien dat het aan mijn logica ligt.

HollowGamer schreef op zaterdag 4 augustus 2018 @ 08:58:
Begrijp ik goed dat je zelfs meerdere formaten gebruikt: png, gif en mp4?

Je zou namelijk als poster ook de gif kunnen gebruiken en de source in een error zoals @q-enf0rcer.1 al aangeeft.

Heb je echt nog browsers die HTML5 video niet ondersteunen? Of bedoel je de video codec(s)?

Een mp4 is normaal velen malen groter dan een gif. Hoe bedoel je dit precies met het besparen van data?

De reden dat ik een mp4 gebruik is omdat deze kleiner is dan een gif. Een gif is ongeveer 4 a 5 mb groot. Een mp4 is hooguit een halve mb groot. Grotere sites als 9gag spelen ook een .mp4 af ipv van .gif. Voordeel van mp4 is namelijk dat deze tijdens het downloaden al kan afspelen. Gif kan dit pas als hij helemaal gedownload is.

Aanvulling; Ik wil ook voorkomen met de .mp4 dat ik iemand zijn databundel op mobiel leeg trek. Een pagina met 25 gifjes van gemiddeld 5 mb is niet leuk.

De moderne browsers ondersteunen tegenwoordig inderdaad html5 video. Super. Maar ik wil met name voor de wat oudere browsers toch een terugval op gif.

Wat ik dus begrijp is dat ik de gif als poster moet instellen. Maar dan gaat hij alsnog de gif downloaden en de mp4. Wat ik dus niet wil. Daarom heb ik een stilstaand plaatje als .png toegevoegd. Ik begrijp alleen niet waarom hij de gif download. Ik heb het ook met een lazyload script geprobeerd. Maar dan download hij op de achtergrond na 5 seconden ook nog alle gifs.

[ Voor 4% gewijzigd door tom.cx op 04-08-2018 13:24 ]

[R4gnax]

tom.cx schreef op zaterdag 4 augustus 2018 @ 13:12:
met name voor de wat oudere browsers toch een terugval op gif.

Je vindt IE 8 nog relevant? Alle andere browsers ondersteunen het <video> element al een eeuwigheid:
https://caniuse.com/#search=video

Beste is trouwens een mix aan te houden van webm met VP8 codec, webm met VP9 codec en mp4. Daarmee dek je als het goed is alles af, incl. 'pure' open-source browsers die geen mp4 licentie kunnen of willen gebruiken.

[ Voor 25% gewijzigd door R4gnax op 04-08-2018 18:57 ]

[Bosmonster]

Kort antwoord: er zijn geen relevante browsers meer die geen html5 video ondersteunen tegenwoordig. Verspil je tijd er niet aan.

[q-enf0rcer.1]

tom.cx schreef op zaterdag 4 augustus 2018 @ 13:12:
[...]

Sorry, maar ik snap deze oplossing niet. Misschien dat het aan mijn logica ligt.

Je kunt programmatisch met JavaScript luisteren naar het error event van in dit geval een HTMLMediaElement. Zodra je een error ontvangt weet je dat je het video element uit de DOM kunt verwijderen en kunt vervangen voor een img element met de gif die je wilt tonen.

Wat jij dus moet doen is het volgende:

- Je statische video element uit de HTML verwijderen
- Programmatisch het video element creëren(zie voorbeeld op de link)
- In de error functie het video element verwijderen
- In de error functie een img element creëren en op de plek in de DOM zetten waar de video stond

[tom.cx]

Bedankt voor de reacties. Stuk wijzer geworden.

Ik zal nog wat extra tags toevoegen voor ondersteuning van webmail codecs.