Ääntä ja kuvaa

Johdanto

Youtube videon lisääminen omalle sivulle tapahtuu yleensä hakemalla halutun videon upotuskoodi. Upotuskoodi löytyy videon sivulta ensin Jaa-nappia ja sen jälkeen Upota-nappia painamalla. Sivu näyttää ensisijaisesti iframe-koodin. Kopioi tämä koodi omalle html-sivulle haluamaasi kohtaan.

Esimerkiksi sivulta http://www.youtube.com/watch?v=M6ZjMWLqJvM löytyy upotuskoodi


<iframe width="560" height="315" src="https://www.youtube.com/embed/M6ZjMWLqJvM" frameborder="0" allowfullscreen></iframe>

joka tuottaa alla olevan tuloksen.

HTML video - tagi

Jos sinulla on videotiedosto, joka pitäisi soittaa sivulla, niin tarvitset HTML5:ssä olevaa erillistä video-tagia. Video tukee videoformaatteja MP4, WebM ja Ogg, jos vain selain tukee ko. videoformaattia. Yleisimmät selaimet tukevat MP4-formaattia.

Yllä oleva video on saatu:

<video width="320" height="240" autoplay controls>
	<source src="videot/Ohje.mp4" type="video/mp4">
	Selaimesi ei tue video-tagia.
</video>

Lisää video tagista löydät sivulta:
https://www.w3schools.com/html/html5_video.asp

HTML audio - tagi

Vastaavasti HTML5:ssä on myös audio-tagi, joka soittaa äänitiedostoja. Turvallisin muoto on mp3, vaikka jotkin selaimet tukevat myös wav ja ogg -muotoja.

Yllä oleva soitin on saatu koodilla:

<audio controls>
	<source src="videot/applause.mp3" type="audio/mpeg">
	Selaimesi ei tue audio-tagia.
</audio>

Lisää audio-tagista löydät:
https://www.w3schools.com/html/html5_audio.asp

Plug-init

Plug-init ovat eri valmistajien tekemiä selaimen laajennuksia, jotka toimivat selaimessa. Plug-in ei siis käynnistä erillisiä ohjelmia näyttääkseen tiedostotyyppinsä mukaisen tiedoston selaimella, vaan selain näyttää tiedoston selainikkuna osana.

Valmistajien ja selainten kotisivuilta saa yleensä helposti ladattua halutut ja uusimmat plug-init. Nykyisin yleisimpiä lisäosia ovat Adoben ShockWave, Flash ja Acrobat-reader, Applen Quicktime ja Java lisäosat.
ShockWave ja Flash player ovat multimedia soittimia. Quicktime näyttää kuvaa ja ääntää. Acrobat plug-in on tarkoitettu näyttämään pdf-documentteja, joiden tyypillisin sovellus on lomake. Java plug-in näyttää Java-Appletteja. Appletit eivät ole sama asia, kuin JavaScript-sovellukset, vaan Java on itsenäinen ohjelmointikieli, jolla voidaan tehdä mm. Web-sovelluksia eli Appletteja.

Embed -elementti

Embed -elementillä voidaan siis liittää HTML-dokumenttiin esimerkiksi kuvaa ja ääntä. Elementin toiminta on riippuvainen sivun käyttäjän selaimeen asennetuista plug-ineistä. Tämä tarkoittaa, että sivusi käyttäjällä täytyy olla asennettuna jokin sopiva plug-in selaimeensa, jotta hän näkisi embed-tagilla liitetyn tiedoston (kuva, video, peli jne.).

Parametrejä:

src	tiedoston sijainti
type	esimerkiksi "audio/wav", "video/x-msvideo", "application/x-vlc-plugin" tai "application/x-shockwave-flash"
width	avattavan ikkunan leveys
height	avattavan ikkunan korkeus

Muut parametrit riippuvat paljon siitä, mikä plug-in käyttäjän selaimeen on asennettuna ja minkä tyyppinen tiedosto avataan.

Mahdollisia parametrejä:

autoplay	aloitetaanko toisto automaattisesti
loop	kuinka monta kertaa esim. ääntä toistetaan
pluginspage	osoite, josta plugin on haettavissa
height	avattavan ikkunan korkeus

Esimerkiksi (huomaa, että nykyään embed-elementillä ei ole välttämättä lopetus-tagia):

	<embed src="videot/Ohje.avi" type="video/x-msvideo" width="300px" autoplay="no" />

tuottaa seuraavan tuloksen:

Embed elementistä lisää:
https://www.w3schools.com/tags/tag_embed.asp

Object

Object-elementtiä käytetään myös videon ja äänen lisäämiseen kotisivulle. Tällöin esimerkiksi videon korkeus ja leveys voidaan antaa object-elementin parametrina ja soittimen parametrit erillisillä <param> -tageilla. Näitä param-määrityksiä saa olla niin monta, kuin tarvitsemme. Yllä olevassa Youtube-videossa niitä oli kolme.

Esimerkiksi:

<object data="videot/Ohje.avi">
  <param name="autoplay" value="no" />
</object>

Object elementistä lisää:
https://www.w3schools.com/tags/tag_object.asp

Valikko: