html5, Video met terugval naar gif

Status
Niet open voor verdere reacties.

tombalfoort

Gebruiker
Lid geworden
25 sep 2006
Berichten
386
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

Schermafbeelding 2018-08-03 om 13.32.05.png Schermafbeelding 2018-08-03 om 13.32.29.png

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.
 

Wist niet dat dit moest. Maar oplossing is simpel. De ondersteuning voor .gif niet gedaan. Er is maar zn klein percentage die geen problemen zal ondervinden dat het niet de moeite waard is. Dit kwam mede dankzij de tweakers post naar boven.

Kan je hiermee verder als cross-browser <video> voor huidige en oudere browsers, dan heb je de img niet meer nodig.
https://www.sitepoint.com/implementing-cross-browser-video-playback-in-html5/
Lees ook het stukje even over .htaccess als het niet goed werkt.

Flash oplossingen worden niet meer gebruikt, dat is voor hele oude browsers.

Suc6. Have fun.

Thx. Het is inmiddels een soort van gelukt.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan