[HTML5] De video-tag

ICTscripters maakt gebruik van cookies. Door het gebruiken en browsen naar onze site gaat je automatisch akkoord met het gebruik van cookies. Klik hier voor meer informatie

  • HTML5
    De video-tag is beschikbaar sinds HTML5
    HTML5 is een flinke verbeterering van de HTML (1.0) die wij kennen.
    Het brengt veel mogelijkheden brengt waardoor je (bijna-)geen Flash nodig hebt.
    Helaas ondersteunen oudere browsers deze functie niet.
    Er zijn veel manieren om dit naar wens te maken, en ik leg de handige opties uit.

    Video-tag
    Gelukkig is HTML redelijk simpel. De video roep je op doormiddel van:

    PHP Source Code

    1. <video src="./video/intro.mp4"></video>


    - Controls
    Controls zijn simpel weg de knopjes voor pauze, afspelen etc.
    Dit is simpel in te stellen, doormiddel van true (aan) en false (uit).
    Voorbeeld:

    PHP Source Code

    1. <video src="./video/intro.mp4" controls="true"></video>


    - Autoplay*
    We weten vast allemaal wat autoplay is. Het afspelen begint wanneer
    de bezoeker je website opent. Ook dit is heel simpel:

    PHP Source Code

    1. <video src="./video/intro.mp4" autoplay="false"></video>


    - Autobuffer*
    Autobuffer maakt gebruik van cache, zodat het filmpje in het vervolg
    sneller laad. Voorbeeld:

    PHP Source Code

    1. <video src="./video/intro.mp4" autobuffer="false"></video>


    - Width en height
    Width (breedte) kan worden ingesteld per pixel (px) en procenten (%)
    Dit geld ook voor height (hoogte). Die hoeft niet gelijk te zijn aan elkaar.
    Voorbeeld:

    PHP Source Code

    1. <video src="./video/intro.mp4" width="50%" heigth="100px"></video>


    - Poster*

    Dit bied de mogelijkheid om een plaatje te plaatsen voor het filmpje begint
    Dit kan zijn om het spannender te maken, of je bezoekers een kleine preview te geven
    Voorbeeld:

    PHP Source Code

    1. <video src="./video/intro.mp4" poster="./images/sneakpeak.png"></video>


    - Achtergrond
    Stel dat een browser deze tag niet ondersteund kan je altijd tekst of een afbeelding
    erachter zetten met bijv 'Uw browser ondersteund dit niet'
    Voorbeeld

    PHP Source Code

    1. <video src="./video/intro.mp4" width="50%" heigth="100px""><img src="./images/novideosupport.png"></video>



    Eind resutaat voorbeeld (voorbeeld):

    PHP Source Code

    1. <video src="./video/intro.mp4" poster="./images/sneakpeak.png" width="250px" heigth="100px" controls="true" autoplay="false"></video>



    * dit hoeft niet persee in de html-tag te staan. Doe je dit niet dan laat ie het op 'false' staan.

    Dit is mijn eerste tutorial, kritiek is altijd welkom.
    Mit's het abn is.
    Niet plaatsen op andere fora's/website zonder mijn goedkeuring.
    ★★★

    849x gelezen

Reacties 1

  • K.Rens -

    Super handig, bedankt!
    Goed om eens een handig overzicht te hebben.

    Ik wist dat de tag bestond, maar voor je blogbericht wist ik eerlijk gezegd nog niet hoe deze te gebruiken.

    Bedankt om te delen!