Ääni ja video verkkosivuilla (HTML5 Audio ja Video)

Ääni ja video verkkosivuilla Selainohjelmointi (JavaScript) (HTML5 Audio ja Video) T-111.1100 Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mari Hirvi Laine DI Markku Mediatekniikanlaitos laitos Mediatekniikan 8. maaliskuuta 2015

Luennon jälkeen tunnen eri ääni- ja videotiedostomuodot sekä osaan hyödyntää ääntä ja videota verkkosivuilla HTML5 Audio:n ja Video:n avulla.

Luennon sisältö Johdanto Koodekit ja säiliötiedostomuodot HTML5-mediaelementit ja niiden rajapinnat Videoeditointi selaimessa JavaScript API:t Yhteenveto ja tehtävänanto

Johdanto

Ääni ja video verkossa Nopeammin Parantuneet tietoliikenneyhteydet Laadukkaammin Kehittyneet ääni- ja videokoodekit Saavutettavammin Natiivi selaintuki HTML5:n myötä Enemmän Musiikkipalvelut: Spotify, SoundCloud, Pandora,... Videopalvelut: YouTube, Vimeo, Netflix,...

Lyhyt historia 1990-luvun alku MIDI-ohjaustiedostot äänelle ja GIF-kuvatiedostot animaatiolle. 1991 Ääni- ja videotiedostojen toistaminen. QuickTime Player ja (Windows) Media Player julkaistaan. 1996 Multimediaesitysten toistaminen. Flash Player julkaistaan. Äänituki, ei videotukea. http://www.marketingprofs.com/chirp/2012/9127/the-history-of-web-video-delivery-infographic and https://en.wikipedia.org/

Lyhyt historia 1990-luvun loppu Ääni- ja videovirtojen toistaminen. RealPlayer (1995), ActiveMovie alias Windows Media Player (1996), Flash Player 4 (vain ääni, 1999) ja QuickTime Player 4 (1999) julkaistaan. 2002-2005 Flash Player 6:een (2002) videotuki (Spark,.swf). Versioiden 7 (2003) ja 9 Update 3 (2005) myötä videotuki parantuu huomattavasti (VP6,.flv H.264,.f4v). http://www.marketingprofs.com/chirp/2012/9127/the-history-of-web-video-delivery-infographic and https://en.wikipedia.org/

Lyhyt historia 2005 Videopalvelu YouTube julkaistaan. Videotoistimeksi valittiin Flash Player erinomaisen markkinaosuuden takia. 2007 Älypuhelin iphone julkaistaan. Ei Flash Player tukea. 2007 Multimediaesitysten toistaminen. Silverlight Player julkaistaan. Ääni- ja videotuki. http://www.marketingprofs.com/chirp/2012/9127/the-history-of-web-video-delivery-infographic and https://en.wikipedia.org/

Lyhyt historia 2008 Natiivi selaintuki äänelle ja videolle. HTML5spesifikaation ensimmäinen luonnos julkaistaan. 2011 Adobe lakkauttaa Flash Player mobiilialustakehityksen. 2014 (nykyhetki) 80-90% selaimista tukee HTML5 <audio> ja <video>:ta. 2014 loppu (tulevaisuus) HTML5-spesifikaation suositus julkaistaan. http://www.marketingprofs.com/chirp/2012/9127/the-history-of-web-video-delivery-infographic and https://en.wikipedia.org/

Ääniteoriaa Kanavat Äänikanavien määrä, 2-kanavaa (stereo) Näytteenottotaajuus Äänisignaalista otettavien näytteiden määrä sekunnissa eli näytteenottotiheys (isompi laadukkaampi). Vaikuttaa myös toistettavan taajuusalueen kokoon, yleisin 44.1 khz Bittimäärä Näytteen arvon ilmoittamistarkkuus eli tasojen määrä (isompi = laadukkaampi), 216

Ääniteoriaa https://en.wikipedia.org/wiki/pulse-code_modulation

Videoteoriaa Näyttöresoluutio Videosignaalin kuvatarkkuus pikseleissä, 1920x1080 pikseliä on hyvä (täysteräväpiirto) Virkistystaajuus Videosignaalin päivitysmäärä sekunnissa (isompi = sulavampi), yleinen 24 ruutua sekunnissa (frames per second, fps) Väriavaruus Päätelaitteessa oleva värijärjestelmä, esim. RGB televisioissa

Videoteoriaa https://fi.wikipedia.org/wiki/uhd

Videoteoriaa Tiedonsiirtonopeus Tiedonsiirtoon (streaming) tarvittava kaistanleveys (parempilaatuinen tarvitsee enemmän kaistaa), esim. 192 kbit/s MP3:lle on hyvä Viive Tiedon purkamisesta aiheutuva viive, alle 150 ms viive puheelle on hyvä

Koodekit ja säiliötiedostomuodot

Mikä on koodekki? Tietokoneohjelma, joka pakkaa ja purkaa puhe-, äänitai videosignaalia Luennolla keskitytään verkon kannalta oleellisiin koodekkeihin Luennolla ei käsitellä puhekoodekkeja Tavoitteena on minimoida tiedonsiirtoon ja / tai tallennukseen tarvittava kapasiteetti sekä samanaikaisesti säilyttää paras mahdollinen laatu Koodekkeja on useita erilaisia Kuten myös niiden tuottaman tiedon tallentamiseen käytettäviä tiedostomuotoja

Äänikoodekit Verkon kannalta oleellisimmat PCM MP3 AAC Vorbis Opus Muita suosittuja äänikoodekkeja Häviöttömät (esim. FLAC ja ALAC) Monikanavaiset äänijärjestelmät (esim. DTS)

PCM (Lineaarinen) Pulssikoodimodulaatio Sai alkunsa jo vuonna 1937 (Alec Reeves) Koodaa äänisignaalin digitaaliseen muotoon ottamalla siitä näytteitä tasaisin väliajoin Hyvät puolet Häviötön, maksuton, tuki monikanavaäänille (max. 8) Huonot puolet Iso tiedostokoko Tekniset tiedot WAV-säiliössä: Tiedostopääte: *.wav, tyyppi: audio/wav; codecs='1'

MP3 MPEG-1 ja MPEG-2 Audio Layer III Julkaistu vuonna 1993 (ISO/IEC MPEG Audio Committee) Hyvät puolet Hallitseva äänikoodekki musiikin jakelussa, hyvä pakkaus Huonot puolet Häviöllinen, maksullinen (patentoitu, vanhenee 2017), stereoääni Tekniset tiedot MPEG-säiliössä: Tiedostopääte: *.mp3, tyyppi: audio/mpeg; codecs='mp3'

Advanced Audio Coding (AAC) MPEG-2 Part 7 ja MPEG-4 Part 3 (MPEG-4 Audio) Julkaistu vuonna 1997 (ISO/IEC MPEG Audio Committee) Hyvät puolet MP3:n seuraaja (parempi pakkaus/laatu suhde), tuki monikanavaäänille (max. 48), profiilit, oletuskoodekki YouTubessa ja itunesissa Huonot puolet Häviöllinen, maksullinen (patentoitu) Tekniset tiedot MPEG-2 -säiliössä: Tiedostopääte: *.aac, tyyppi: audio/mpeg (ei koodekkiparametreja) MPEG-4 säiliössä: Tiedostopääte: *.m4a, tyyppi: audio/mp4; codecs='mp4a.40.2'

Vorbis Vorbis Julkaistu vuonna 2000 (Xiph.Org Foundation) Hyvät puolet Maksuton (patentti- ja rojaltivapaa, avoin), Spotify käyttää, avoin vaihtoehto MP3:lle, tuki monikanavaäänille (max. X) Huonot puolet Häviöllinen Tekniset tiedot Ogg-säiliössä: Tiedostopääte: *.oga, tyyppi: audio/ogg; codecs='vorbis' WebM-säiliössä: Tiedostopääte: *.webm, tyyppi: audio/webm; codecs='vorbis'

Opus RFC 6716 Julkaistu vuonna 2012 (IETF) Hyvät puolet Maksuton (patentoitu, rojaltivapaa, avoin), pieni viive, musiikille ja VoIP:lle Huonot puolet Häviöllinen, toistaiseksi heikko selaintuki Tekniset tiedot Ogg-säiliössä: Tietostopääte: *.opus, tyyppi: audio/ogg; codecs='opus'

Äänikoodekkien vertailu Äänikoodekki Julkaisija Julkaisuvuosi Häviöllinen Maksuton Käyttökohde PCM Alec Reeves 1937 ei äänen digitalisointi MP3 ISO/IEC MPEG Audio Committee 1993 ei musiikki AAC ISO/IEC MPEG Audio Committee 1997 ei musiikki Vorbis Xiph.Org Foundation 2000 musiikki Opus IETF 2012 VoIP, musiikki https://en.wikipedia.org/wiki/comparison_of_audio_formats

Videokoodekit Verkon kannalta oleellisimmat H.264 Theora VP8 VP9 Muita suosittuja videokoodekkeja Häviöttömät (esim. Lagarith) Nykyiset (esim. DivX ja Cinepak) Tulossa (esim. H.265, joka sisältää 8K UHD -tuen)

H.264 MPEG-4 Part 10 tai MPEG-4 Advanced Video Coding (AVC) Julkaistu vuonna 2003 (ITU-T VCEG ja ISO/IEC JTC1 MPEG) Hyvät puolet Kattaa kaikenlaiset päätelaitteet; yksi Blu-Ray:n videokoodekeista; YouTube, Vimeo ja itunes Store käyttävät, profiilit Huonot puolet Häviöllinen ja maksullinen (patentoitu & lisensoitu), patenttiongelmia Tekniset tiedot MPEG-4 -säiliössä: Tiedostopääte: *.mp4, tyyppi: video/mp4; codecs='xxxxxx' (tarkka koodekki eli xxxxxx riippuu H.264:n profiilista, esim. video/mp4; codecs='avc1.4d401e')

Theora Theora Julkaistu vuonna 2004 (Xiph.Org Foundation) Pohjautuu VP3-videokoodekkiin Hyvät puolet Maksuton (patentoitu, rojaltivapaa), avoin vaihtoehto H.264:lle Huonot puolet Häviöllinen Tekniset tiedot Ogg-säiliössä: Tiedostopääte: *.ogv, tyyppi: video/ogg; codecs='theora'

VP8 VP8 Julkaistu vuonna 2008 (Google) Hyvät puolet Maksuton (patentoitu, rojaltivapaa, avoin), avoin vaihtoehto H. 264:lle Huonot puolet Häviöllinen, patenttisyytteitä Tekniset tiedot WebM-säiliössä: Tiedostopääte: *.webm, tyyppi: video/webm; codecs='vp8'

VP9 VP9 Julkaistu vuonna 2012 (Google) Hyvät puolet VP8:n seuraaja (parempi pakkaus/laatu suhde), maksuton (patentoitu, rojaltivapaa, avoin), avoin vaihtoehto H.264:lle Huonot puolet Häviöllinen, toistaiseksi heikko selaintuki, (patenttisyytteitä?) Tekniset tiedot WebM-säiliössä: *.webm, video/webm; codecs='vp9'

Videokoodekkien vertailu Videokoodekki Julkaisija Julkaisuvuosi Häviöllinen Maksuton Käyttökohde H.264 ITU-T VCEG ja ISO/IEC JTC1 MPEG 2003 ei viihde Theora Xiph.Org Foundation 2004 viihde VP8 On2 Technologies (Google) 2008 viihde VP9 Google 2012 viihde https://en.wikipedia.org/wiki/comparison_of_video_codecs

Mikä on säiliötiedostomuoto? Säiliö, joka määrittelee, miten sen sisään tallennetaan tietoa Luennolla keskitytään verkon kannalta oleellisiin äänen ja videon säiliötiedostomuotoihin Luennolla ei käsitellä kuvasäiliöitä Säiliöön voidaan tallentaa eri tyyppisiä tiedostoja Esimerkiksi aiemmin mainituilla koodekeilla pakattuja ääni- ja videotiedostoja sekä tekstitystiedostoja Tallennetuista tiedostoista sekä itse säiliöstä voidaan tarjota metatietoa

Säiliötiedostomuodot Verkon kannalta oleellisimmat WAV Vain ääni MPEG Ogg WebM Muita suosittuja säiliötiedostomuotoja Kuville (esim. TIFF) Multimedialle (esim. Matroska)

WAV Waveform Audio File Format (WAV) Julkaistu vuonna 1991 (Microsoft ja IBM) Äänikoodekit PCM Laaja laite- ja ohjelmistotuki Tekniset tiedot Tiedostopääte: *.wav, tyyppi: audio/wav; codecs='1'

MPEG-4 MPEG-4 Part 14 Pohjautuu Applen vanhaan QuickTime -säiliöön (*.mov) Äänikoodekit MP3 ja AAC Videokoodekit H.264 Laaja laite- ja ohjelmistotuki Tekniset tiedot Tiedostopääte: *.mp4, tyyppi: video/mp4; codecs='xxxxxx, mp4a.40.2' (tarkka koodekki eli 'xxxxxx' riippuu H.264:n profiilista, esim. video/mp4; codecs='avc1.4d401e, mp4a.40.2')

Ogg Avoin Suositeltiin jossain vaiheessa HTML5 <audio> ja <video> elementtien viralliseksi formaatiksi, mutta suositus poistettiin Applen ja Nokian toiveesta Äänikoodekit Opus ja Vorbis Videokoodekit Theora Ei vielä kovin laajasti käytetty Tekniset tiedot Tiedostopääte: *.ogv, tyyppi: video/ogg; codecs='theora, vorbis'

WebM Avoin Googlen kehittämä Teknisesti Matroskan kaltainen Äänikoodekit Vorbis Videokoodekit VP8 ja VP9 Laitetuki rakentumassa Tekniset tiedot Tiedostopääte: *.webm, tyyppi: video/webm; codecs='vp8, vorbis' Tiedostopääte: *.webm, tyyppi: video/webm; codecs='vp9, vorbis'

Ääni- ja videotiedostojen muuntaminen Online Converter Erityyppisten tiedostojen muuntaminen formaatista toiseen Tukee myös äänen ja videon muuntamista Kaikki säiliöt ja koodekit tuettuna Vähän asetuksia Web-pohjainen Rajoitus tiedoston maksimikoolle http://www.online-convert.com/

Ääni- ja videotiedostojen muuntaminen Audacity Äänitiedostojen muuntaminen formaatista toiseen Lähes kaikki säiliöt ja äänikoodekit tuettuna Paljon asetuksia Työpöytäsovellus (kaikille käyttöjärjestelmille) http://audacity.sourceforge.net/

Ääni- ja videotiedostojen muuntaminen Miro Video Converter Ääni- ja videotiedostojen muuntaminen formaatista toiseen.mp3,.oga,.mp4,.ogv ja.webm tuettuna Ei asetuksia Työpöytäsovellus (Windows ja Mac) http://www.mirovideoconverter.com/

Ääni- ja videotiedostojen muuntaminen HandBreak Videotiedostojen muuntaminen formaatista toiseen.mp4 (ja.mkv) tuettuna Paljon asetuksia Työpöytäsovellus (kaikille käyttöjärjestelmille) http://handbrake.fr/

Säiliötiedostomuotojen sekä niiden äänija videokoodekkien selaintuen vertailu Säiliötiedostomuoto Chrome Firefox IE Opera Safari ei ei AAC (ääni) ei (?) ei ei MP3 (ääni) ei H.264 (video) ei ei ei ei Opus (ääni) ei ei Vorbis (ääni) ei ei Theora (video) ei ei MPEG-4 Ogg http://html5test.com/

Säiliötiedostomuotojen sekä niiden äänija videokoodekkien selaintuen vertailu Säiliötiedostomuoto Chrome Firefox IE Opera Safari (?) (?) (?) (?) ei ei Vorbis (ääni) ei ei VP8 (video) ei ei VP9 (video) ei ei ei WAV PCM (ääni) WebM http://html5test.com/

Huomioita koodekeista ja säiliötiedostomuodoista Selainten tuki koodekeille / säiliötiedostomuodoille on todella vaihtelevaa Mitä vanhempi selainversio sitä huonompi tuki erilaisille koodekeille/säiliötiedostomuodoille Yritä tarjota selaimille ensin uusimpia (=kehittyneempiä) koodekkeja / säiliötiedostomuotoja Vanhat koodekit / säiliötiedostomuodot taas toimivat varmemmin

HTML5 mediaelementit ja niiden rajapinnat

HTML5 mediaelementit HTML5 mediaelementti Kuvaus <audio> (oleellinen) HTML5 elementti, joka määrittelee äänitiedoston toistamisen. <video> (oleellinen) HTML5 elementti, joka määrittelee videotiedoston toistamisen. <source> (oleellinen) HTML5 elementti, joka määrittelee mediatiedoston (ääni- tai videotiedosto) toistamiselle yhden tai useamman formaatin (lähteen). <track> HTML5 elementti, joka määrittelee mediatiedoston (ääni- tai videotiedosto) toistamiselle yhden tai useamman tekstityksen. <embed> HTML(5) elementti, joka määrittelee upotettavan objektin, esim. Flash-varasuunnitelman. <object> HTML elementti, joka määrittelee upotettavan objektin, esim. Flash-varasuunnitelman. <param> HTML elementti, joka määrittelee upotettavalle objektille (<object>) yhden tai useamman parametrin.

HTML5 mediaelementtien selaintuen vertailu HTML5 mediaelementti Chrome Firefox IE Opera Safari <audio> <video> <source> (?) (?) <track> ei http://html5test.com/

HTML5 <audio>:n attribuutit Attribuutti Arvo Kuvaus autoplay (oleellinen) autoplay (tyhjä) äänitiedoston soittaminen automaattisesti controls (oleellinen) controls (tyhjä) selaimen oman käyttöliittymän näyttäminen äänitiedoston ohjausta varten crossorigin anonymous usecredentials (anonymous) (tyhjä) äänitiedoston latauksen estäminen toisesta verkkoalueesta (engl. domain) loop loop (tyhjä) äänitiedoston automaattinen uudelleentoisto sen loputtua mediagroup merkkijono mediaelementtien tahdistaminen muted muted (tyhjä) äänitiedoston vaientaminen preload none metadata auto (auto) (tyhjä) äänitiedoston esilataaminen sivulatauksen yhteydessä src (oleellinen) URL äänitiedoston URL Lisäksi: type (oleellinen) äänitiedoston tyyppi (MIME-tyyppi + mahdollisesti äänikoodekki) Huom. Attribuutin arvoksi voidaan huoletta antaa pelkän MIME-tyypin (esim. type="audio/mpeg") lisäksi myös äänikoodekin (esim. type="audio/mpeg; codecs='mp3'"). http://www.w3.org/tr/html5/embedded-content-0.html#the-audio-element

HTML5 <audio>:n peruskäyttö

HTML5 <video>:n attribuutit Attribuutti Arvo Kuvaus autoplay (oleellinen) autoplay (tyhjä) videotiedoston soittaminen automaattisesti controls (oleellinen) controls (tyhjä) selaimen oman käyttöliittymän näyttäminen videotiedoston ohjausta varten crossorigin anonymous usecredentials (anonymous) (tyhjä) videotiedoston latauksen estäminen toisesta verkkoalueesta (engl. domain) height (oleellinen) ei negatiivinen kokonaisluku videotiedoston korkeus pikseleissä loop loop (tyhjä) videotiedoston automaattinen uudelleentoisto sen loputtua mediagroup merkkijono mediaelementtien synkkaaminen http://www.w3.org/tr/html5/embedded-content-0.html#the-video-element

HTML5 <video>:n attribuutit Attribuutti Arvo Kuvaus muted muted (tyhjä) videotiedoston vaientaminen poster (oleellinen) URL kuvatiedoston URL preload none metadata auto (auto) (tyhjä) videotiedoston esilataaminen sivulatauksen yhteydessä src (oleellinen) URL videotiedoston URL width (oleellinen) ei negatiivinen kokonaisluku videotiedoston leveys pikseleissä Lisäksi: type (oleellinen) videotiedoston tyyppi (MIME-tyyppi + mahdollisesti ääni- ja videokoodekki) Huom. Attribuutin arvoksi voidaan huoletta antaa pelkän MIME-tyypin (esim. type="video/ogg") lisäksi myös ääni- ja videokoodekit (esim. type="video/ogg; codecs='theora, vorbis "). http://www.w3.org/tr/html5/embedded-content-0.html#the-video-element

HTML5 <video>:n peruskäyttö

HTML5 <source>:n attribuutit Attribuutti Arvo Kuvaus media merkkijono mediatiedoston mediatyyppi src (oleellinen) URL mediatiedoston URL mediatiedoston tyyppi. type (oleellinen) merkkijono Huom. Attribuutin arvoksi kannattaa antaa pelkkä MIME-tyyppi (esim. type=" video/ogg") ts. jättää ääni- ja videokoodekki kokonaan pois (esim. type=" video/ogg; codecs='theora, vorbis "). Ongelmallinen ainakin Firefox-selaimen kanssa. http://www.w3.org/tr/html5/embedded-content-0.html#the-source-element

HTML5 <source>:n peruskäyttö

HTML5 <track>:n attribuutit Attribuutti Arvo Kuvaus default (tyhjä) tekstitiedoston asettaminen vakioksi kind subtitles (vakio) captions descriptions chapters metadata lueteltu lista label (oleellinen) merkkijono tekstitystiedoston näytettävä nimi src (oleellinen) URL tekstitystiedoston URL srclang (oleellinen) BCP 47 -kielikoodi tekstitystiedoston BCP 47 kielikoodi http://www.w3.org/tr/html5/embedded-content-0.html#the-track-element

HTML5 <track>:n peruskäyttö

HTML5 <audio>, <video>, <source> ja <track>:n omat rajapinnat <audio> (rakentaja) <video> (ominaisuus) <source> (ominaisuus) <track> (ominaisuus) Audio() height media default Audio( src ) poster src kind videoheight type label videowidth readystate width src srclang track http://www.w3.org/tr/html5/embedded-content-0.html

HTML5 <audio> ja <video>:n yhteiset rajapinnat Ominaisuus Ominaisuus Ominaisuus Ominaisuus Metodi audiotracks defaultmuted networkstate src addtexttrack(... ) autoplay defaultplaybackrate paused texttracks canplaytype( type ) buffered duration playbackrate videotracks getstartdate() controller ended played volume load() controls error preload pause() crossorigin loop readystate play() currentsrc mediagroup seekable currenttime muted seeking http://www.w3.org/tr/html5/embedded-content-0.html#htmlmediaelement

HTML5 <audio> ja <video>:n yhteiset rajapinnat Tapahtuma Tapahtuma Tapahtuma Tapahtuma abort error playing stalled canplay loadeddata progress suspend canplaythrough loadedmetadata ratechange timeupdate durationchange loadstart resize volumechange emptied pause seeked waiting ended play seeking http://www.w3.org/tr/html5/embedded-content-0.html#mediaevents

HTML5 <audio> ja <video>:n yhteiset rajapinnat (oleellisimmat) Ominaisuus / Metodi Kuvaus autoplay onko mediatiedoston toistaminen aloitettu automaattisesti: true false (vakio) controls onko mediatiedoston toistamiseen tarjottu selaimen omaa käyttöliittymää: true false (vakio) currentsrc mediatiedoston osoite (URL), joko ko. elementin tai sopivan <source> lapsielementin src attribuutin arvo currenttime mediatiedoston toistokohta sekunneissa ja sen murto-osissa, käytä parseint( currenttime ) -metodin kanssa duration mediatiedoston kesto sekunneissa ja sen murto-osissa, käytä parseint( duration ) -metodin kanssa ended onko mediatiedoston toistaminen saavuttanut lopun: true false (vakio) paused onko mediatiedosto toistaminen pysäytetty: true (vakio) false volume mediatiedoston toistamisen äänenvoimakkuus: 0.0 (min) 1.0 (max, vakio) canplaytype( type ) tukeeko selain mediatiedoston toistamista: (ei) maybe probably pause() pysäytä mediatiedoston toistaminen play() aloita/jatka mediatiedoston toistaminen http://www.w3.org/tr/html5/embedded-content-0.html#htmlmediaelement

HTML5 <audio> ja <video>:n yhteiset rajapinnat (oleellisimmat) Tapahtuma Kuvaus canplaythrough mediatiedoston toistaminen voidaan aloittaa (katso play() -metodi) ended mediatiedoston toistaminen on saavuttanut lopun error mediatiedoston lataaminen epäonnistui pause mediatiedoston toistaminen on pysäytetty (katso pause() -metodi) play mediatiedoston toistaminen on aloitettu/jatkettu (katso play() -metodi) timeupdate mediatiedostoa toistetaan ja sen toistokohta on muuttunut http://www.w3.org/tr/html5/embedded-content-0.html#mediaevents

Mediakontrolleriolion rajapinta Tapahtuma Tapahtuma Tapahtuma Tapahtuma canplay ended (oleellinen) play (oleellinen) volumechange canplaythrough (oleellinen) loadeddata playing waiting durationchange loadedmetadata ratechange emptied pause (oleellinen) timeupdate (oleellinen) http://www.w3.org/tr/html5/embedded-content-0.html#mediaevents

HTML5 <audio>:n rajapintojen peruskäyttö

Mediaresurssien esilataus Ongelma: Kuvat (tiedostot) ja äänet (puskuroitava suoratoisto) pitää ensin ladata palvelimelta selaimeen ennen kuin niitä voidaan näyttää tai soittaa käyttäjälle Ratkaisu: Esilataus (preload), joka varmistaa, että kuvia ei näytetä tai ääniä soiteta ennen latauksen valmistumista Katso esimerkkikoodit image_preload_part[1-5].html audio_preload_part[1-3].html script_execution_order.html Tulostavat lisätietoja Developer Tools:n konsolille Tutustu tarkasti ohjelmakoodeihin ja kommentteihin

Kuvien esilatauksen peruskäyttö

Äänien esilatauksen peruskäyttö

http://www.createjs.com/#!/preloadjs

Ääni kaikille käyttäjille

http://www.createjs.com/#!/soundjs

http://kolber.github.io/audiojs/

audio.js -kirjaston peruskäyttö

Huomioita HTML5 mediaelementeistä ja niiden rajapinnoista Selainten tuki HTML5 mediaelementeille on erittäin hyvä Vain <track>:n tuki puuttuu Firefoxista HTML5 mediaelementtien käyttöliittymä vaihtelee selaimen mukaan Eri säiliötiedostomuotojen tarjoaminen selaimille työlästä Vaatii usean <source>:n määrittelyn Koodekkien määritteleminen HTML5 mediaelementeille ongelmallista <audio> ja <video>:n type -attribuuttiin voi huoletta määritellä MIME-tyypin lisäksi myös koodekit <source>:n type -attribuuttiin taas ei kannata määritellä MIMEtyypin lisäksi koodekkeja (ongelmia ainakin Firefoxissa)

Huomioita HTML5 mediaelementeistä ja niiden rajapinnoista HTML5 mediaelementtien ohjelmointirajapinta JavaScriptille on todella kattava Ajoittain hankala käyttää, esim. äänien esilataus ja puskurointi Selaintuen testaus epävarmaa (canplaytype( type )) Selainten toteutuksissa eroavaisuuksia, esim. canplaythrough tapahtuma Esilatauskirjastot vähentävät työmäärää huomattavasti Oppimiskynnys uuden kirjaston kanssa Ääni- ja videokirjastot auttavat huomattavasti Täydellinen selaintuki, mukaan lukien vanhat selaimet (Flashvarasuunnitelman kautta) Yhtenäinen käyttöliittymä, joka on muokattavissa omannäköiseksi Oppimiskynnys uuden kirjaston kanssa

Huomioita HTML5 mediaelementeistä ja niiden rajapinnoista CORS-tietoturvaongelmat hankaloittavat kehitystä <track> ja Flash-varasuunnitelma (ongelmia ainakin Chromessa) Virheilmoitukset näkyvät yleensä Developer Tools:n konsolissa Ratkaisu: file:// sijasta aja verkkosivut joko 1) omalla verkkopalvelimella localhost:ssa (esim. Mongoose, https://code. google.com/p/mongoose/) tai 2) siirrä verkkosivut kurssin DIMEverkkopalvelimelle

Videoeditointi selaimessa

Mediaresurssien tahdistaminen HTML5 <video>:n kanssa HTML5 <video>:ta toistettaessa sen päälle voidaan HTML:n ja CSS:n avulla sijoitella muuta sisältöä, kuten kuvia tai tekstiä Sisältö sijoitellaan suhteessa HTML5 <video>:on HTML5 <video>:ta toistettaessa sen rinnalla voidaan soittaa ääniefektejä Mediaresurssit tahdistetaan HTML5 <video>:n kanssa JavaScript:n avulla Katso esimerkkikoodit video_synchronize_content.html Tulostaa lisätietoja Developer Tools:n konsolille Tutustu tarkasti ohjelmakoodiin ja kommentteihin

Mediaresurssien tahdistaminen HTML5 <video>:n kanssa Tiivis mutta kattava tietopaketti HTML5 <audio>:n ja <video>:n eduista sekä miten ääni- ja videotiedostoja voidaan esittää verkossa joko erikseen tai yhdisteltynä http://coding.smashingmagazine.com/2011/03/11/syncingcontent-with-html5-video/ Ääni- ja videotiedostojen tahdistaminen onnistuu myös HTML5 <audio>:n ja <video>:n mediagroup -attribuutin avulla Videotiedostoon on myös mahdollista lisätä (=tahdistaa) tekstitys HTML5 <track>:n avulla

Ääniefektit Ääniefektit ovat hyödyllisiä ja sopivat erittäin hyvin esimerkiksi peleihin tukemaan vuorovaikutusta Ilmaisia ääniefektejä esim. http://freesound.org/ http://freesound.org/

HTML5 <video> + HTML5 <canvas> HTML5 <video>:ssa toistettava video voidaan ohjata HTML5 <canvas>:iin Mahdollistaa sisään tulevan videon manipuloinnin lennosta, esim. mustavalkovideoksi muuttamisen Mahdollistaa muun sisällön (esim. kuvat ja tekstit) polttamisen kiinni videoon (sisältö ei enää irrallisina tasoina videon päällä) Yksinkertaisimmillaan HTML5 <video> piilotetaan ja HTML5 <canvas> puolestaan näytetään 1. Käynnistetään animointisilmukka, joka ottaa kuvakaappauksen piilotetusta videosta 2. Piirretään kuvakaappauksesta saatu videodata näytettävään piirtoalueeseen Toistetaan samoja vaiheita videon loppuun saakka

HTML5 <video> + HTML5 <canvas> Videomanipulaatiossa piilotetun HTML5 <video>:n ja näytettävän HTML5 <canvas>:n väliin lisätään vielä yksi piilotettu HTML5 <canvas> 1. 2. 3. 4. Käynnistetään animointisilmukka, joka ottaa kuvakaappauksen piilotetusta videosta Piirretään kuvakaappauksesta saatu videodata piilotettuun piirtoalueeseen Manipuloidaan videodataa lennossa piilotetussa piirtoalueessa Piirretään manipulaatiosta saatu videodata näytettävään piirtoalueeseen Toistetaan samoja vaiheita videon loppuun saakka Katso esimerkkikoodit video_and_canvas_part[0-3].html Tulostaa lisätietoja Developer Tools:n konsolille Tutustu tarkasti ohjelmakoodeihin ja kommentteihin

Huomioita videoeditoinnista selaimessa Mediatiedoston keston (duration) ja toistokohdan (currenttime) ajat kannattaa muuttaa sekunneiksi parseint ( time ) -metodilla Helpottaa aikojen vertailua tahdistuksessa HTML:llä ja CSS:llä tuotettu sisältö (esim. kuvat ja tekstit) kannattaa laittaa HTML5 <video>:n kanssa yhteisen elementin (wrapper) sisään Helpottaa elementtien sijoittelua toistensa suhteen

Huomioita videoeditoinnista selaimessa CORS-tietoturvaongelmat hankaloittavat kehitystä Kuva- ja videodatan manipulointi (ongelmia ainakin Chromessa) Virheilmoitukset näkyvät yleensä Developer Tools:n konsolissa Ratkaisu: file:// sijasta aja verkkosivut joko 1) omalla verkkopalvelimella localhost:ssa (esim. Mongoose, https://code. google.com/p/mongoose/) tai 2) siirrä verkkosivut kurssin DIMEverkkopalvelimelle

JavaScript API:t

Puheentunnistus, konekääntäminen ja puhesynteesi Puheentunnistus Konekääntäminen Puhesynteesi Puhe kielellä A Teksti kielellä A Teksti kielellä B Puhe kielellä B

Puheentunnistus Tietokoneohjelma tunnistaa (ihmisen) puhetta Syöte annetaan puheena, jonka tietokoneohjelma muuntaa tekstiksi (speech to text, STT) Puheentunnistusta voidaan parantaa virittämällä (opettamalla) tietokoneohjelma tiettyä puhujaa varten Sovellusalueet Puhekäyttöliittymät (esim. näkövammaisille) Sanelu (puheen dokumentointi) Tiedon haku videoaineistosta

http://translate.google.com/

http://www.google.com/intl/en/chrome/demos/speech.html

Konekääntäminen Tietokoneohjelma kääntää tekstiä Syöte annetaan tekstinä kielellä A, jonka tietokoneohjelma kääntää tekstiksi kielelle B (machine translation, MT) Konekääntämistä voidaan parantaa rajaamalla aihealuetta ja/tai tarjoamalla tietokoneohjelmalle valmista (käännös)aineistoa Kielitiede liittyy myös oleellisesti konekääntämiseen Sovellusalueet Mobiilisovellukset Sosiaalinen media Sotaväki

http://translate.google.com/

Puhesynteesi Tietokoneohjelma muuntaa (mallintaa) tekstiä (ihmisen) puheeksi Syöte annetaan tekstinä, jonka tietokoneohjelma muuntaa (mallintaa) (ihmisen) puheeksi (text to speech, TTS) Puhesynteesiä voidaan parantaa mallintamalla (ihmisen) äänenmuodostusmekanismia Sovellusalueet Puhekäyttöliittymät (esim. puhepalaute ja konekäännetty puhe) Ruudunlukuohjelmat ja puhelaitteet (esim. vammaiset) Pelit ja animaatiot

http://translate.google.com/

https://chromium.googlecode.com/svn/trunk/samples/audio/shiny-drum-machine.html

Yhteenveto ja tehtävänanto

Yhteenveto HTML5 <audio> ja <video> tarjoavat standardoidun ja natiivin tavan äänen ja videon toistamiseen ja hallintaan Ei enää (välttämättä) selainliitännäisiä Käytössä useita eri koodekkeja ja säiliötiedostomuotoja Yksi yhteinen riittäisi Paljon työtä, jotta voidaan taata äänen ja videon saavutettavuus kaikille käyttäjille Esilataus-, ääni- ja videokirjastot helpottavat työtä Paljon uusia ääneen ja videoon liittyviä JavaScript API:ja, kuten Web Speech API, Media Capture and Streams, Web Audio API,

Tehtävänanto Tuottakaa ryhmässä teemaa tukeva noin minuutin mittainen video Upottakaa video itsenäisesti osaksi nettisivuja Panostakaa videon ideaan, laatuun ja lisäarvoon kampanjalle Harjoitustyön vaatimukset sekä tarkempi tehtävänanto löytyvät kurssin MyCourses-sivuilta Harjoitustyöt-osiosta Palauttakaa harjoitustyö kurssin DIME-verkkopalvelimelle viimeistään maanantaina 21.3.2016 klo 18.00 mennessä

Linkkejä http://net.tutsplus.com/tutorials/html-csstechniques/html5-audio-and-video-what-you-must-know/ http://www.html5rocks.com/en/tutorials/video/basics/ http://diveintohtml5.info/video.html http://coding.smashingmagazine. com/2011/03/11/syncing-content-with-html5-video/ http://www.w3schools.com/tags/ref_av_dom.asp http://wiki.whatwg. org/wiki/video_type_parameters#browser_support

KIITOS! mari.hirvi@aalto.fi