mediaelementit

Mediaelementit ovat verkkosivuilla käytettäviä mediatiedostojen upottamiseen tarkoitettuja HTML-elementtejä. HTML5-standardeihin kuuluvat kaksi semanttista elementtiä, <audio> ja <video>, joilla voidaan esittää ääni- ja videomateriaalia.

Elementeillä voidaan käyttää useita lähteitä <source>-elementtien sisällä, jolloin selain valitsee tuetun formaatin. Lisäksi <track>-elementeillä voidaan lisätä tekstityksiä, kuvailuja ja kirjoituksia. Yleisiä attribuutteja ovat controls, autoplay, loop, muted ja preload; videolle voidaan määrittää width, height sekä poster-kuva.

JavaScriptin kautta mediaelementit tarjoavat toistotoiminnot kuten play() ja pause(), sekä pääsyn currentTime, duration ja volume -ominaisuuksiin. Tapahtumia kuten loadedmetadata, play, pause, timeupdate ja ended voidaan kuunnella.

Saatavuuden vuoksi on tärkeää tarjota fallback-teksti ja varmistaa tekstituki tekstitetyksellä. Tekstitykset on mahdollista toteuttaa <track kind="subtitles" srclang="fi" label="Suomi">.

Yhteensopivuuden takaamiseksi on suositeltavaa tarjota useita formaatteja (esim. MP4/H.264 ja WebM) sekä laskea riippuvuutta selaimesta, jotta toisto toimii mahdollisimman laajasti. Nykyiset selaimet tukevat sekä ääni- että videotoistoa natiivisti.

MediaElement.js on avoimen lähdekoodin kirjasto, joka tarjoaa yhdenmukaisen käyttöliittymän sekä tuki-taustajärjestelmän, jotta toisto toimii mahdollisimman tasaisesti eri ympäristöissä.