Siirry sivun sisältöön Avut CSS HTML JavaScript Kotisivu

Video-objektien upotus Web-sivuille

Johdanto

HTML5-suositus toi mukanaan uuden, yksinkertaisen ja kevyen tavan upottaa sivuille videoita. Enää ei ole tarvetta ongelmallisille selainlaajennuksille, kamalille skriptikirjastoille, eikä hankalalle ja huonosti tuetulle OBJECT-elementille. Nykyisin (2016) videot saadaan sivuille mutkattomasti ja kattavasti, vain yhdellä, siihen tarkoitukseen suunnitellulla video-elementillä.

video-elementti

Käytämme siis video-elementtiä, muutamalla attribuutilla sekä vaihtoehtoisella sisällöllä varmistettuna. Esimerkin vuoksi määrittelemme elementille viisi attribuuttia, vaikka vain ensimmäinen niistä on välttämätön:

Edellinen näyttää koodina seuraavalta:

<video
 src="video/chartreuse.mp4"
 width="320"
 height="180"
 controls
 poster="video/chartreuse.jpg">
<!-- Vaihtoehtoinen sisältö! -->
<p>Lataa <a href="video/chartreuse.mp4">pätkitty esimerkkivideo</a>, tai
<a href="https://www.youtube.com/watch?v=WhMvfZtfoek">katso koko video</a> YouTubessa.</p>
</video>

Elementin sisältö on varattu vanhemmille, video-elementtiä tukemattomille selaimille.

Koodin tulos

Selaimen tulisi esittää, joko:

Esimerkkikoodimme tulostuu seuraavasti:

Ääni-objektien upotusta käsittelevällä sivulla on muutama esimerkki mediaelementtien manipuloinnista, jotka ovat helposti sovellettavissa myos video-elementin työstämiseen.

Dokumentin julkaisupäivämäärä: 2016-02-02.
Osmo Saarikumpu