Ää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.

Jos käyttämäsi web-sivujen julkaisuun tarkoitettu palvelu hylkii iframe-tageja, niin tarvitset ruksin kohtaan Käytä vanhaa upotuskoodia. Tämä koodi on hieman pidempi, mutta toimii yhtälailla.

Esimerkiksi sivulta http://www.youtube.com/watch?v=M6ZjMWLqJvM löytyy vanha upotuskoodi (kopioitu koodi näkyy sinulle todennäköisesti yhdelle riville aseteltuna)

<object width="560" height="315">
	<param name="movie" value="http://www.youtube.com/v/M6ZjMWLqJvM?version=3&hl=fi_FI"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
	<embed src="http://www.youtube.com/v/M6ZjMWLqJvM?version=3&hl=fi_FI" 
		type="application/x-shockwave-flash" width="560" height="315" 
		allowscriptaccess="always" allowfullscreen="true">
	</embed>

</object>

joka tuottaa alla olevan tuloksen.

Jotta tämä yllä oleva video näkyisi käyttäjälle, täytyy hänellä olla Flash-player asennettuna koneelleen. Flash-playerin tyyppisiä asennuksia selaimen yhteyteen kutsutaan plug-ineiksi.

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.

Johdannossa olevassa Youtube esimerkissä on käytetty kahta tapaa liittää video sivulle plug-inin avulla: <object>- ja <embed> -elementit, jotka ovat sisäkkäin. Sisäkkäisyydellä yritetään varmistaa videon näkyvyys. Jos sisempi <embed> ei pysty näyttämään videota, niin seuraavaksi <object> yrittää näyttää sen. Erilleen kirjoitettuna nämä kaksi näyttävät seuraavilta.

<object width="560" height="315">
	<param name="movie" value="http://www.youtube.com/v/M6ZjMWLqJvM?version=3&hl=fi_FI"></param>
	<param name="allowFullScreen" value="true"></param>
	<param name="allowscriptaccess" value="always"></param>
</object>

ja

<embed src="http://www.youtube.com/v/M6ZjMWLqJvM?version=3&hl=fi_FI" 
		type="application/x-shockwave-flash" width="560" height="315" 
		allowscriptaccess="always" allowfullscreen="true">
</embed>

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ää:
http://www.w3schools.com/html5/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ää:
http://www.w3schools.com/html5/tag_object.asp