Ääni ja video verkkosivuilla (HTML5 Audio ja Video)
|
|
- Jere Aaltonen
- 8 vuotta sitten
- Katselukertoja:
Transkriptio
1 Ääni ja video verkkosivuilla Selainohjelmointi (JavaScript) (HTML5 Audio ja Video) T Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mari Hirvi Laine DI Markku Mediatekniikanlaitos laitos Mediatekniikan 8. maaliskuuta 2015
2 Luennon jälkeen tunnen eri ääni- ja videotiedostomuodot sekä osaan hyödyntää ääntä ja videota verkkosivuilla HTML5 Audio:n ja Video:n avulla.
3 Luennon sisältö Johdanto Koodekit ja säiliötiedostomuodot HTML5-mediaelementit ja niiden rajapinnat Videoeditointi selaimessa JavaScript API:t Yhteenveto ja tehtävänanto
4 Johdanto
5 Ää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,...
6 Lyhyt historia 1990-luvun alku MIDI-ohjaustiedostot äänelle ja GIF-kuvatiedostot animaatiolle Ääni- ja videotiedostojen toistaminen. QuickTime Player ja (Windows) Media Player julkaistaan Multimediaesitysten toistaminen. Flash Player julkaistaan. Äänituki, ei videotukea. and
7 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 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). and
8 Lyhyt historia 2005 Videopalvelu YouTube julkaistaan. Videotoistimeksi valittiin Flash Player erinomaisen markkinaosuuden takia Älypuhelin iphone julkaistaan. Ei Flash Player tukea Multimediaesitysten toistaminen. Silverlight Player julkaistaan. Ääni- ja videotuki. and
9 Lyhyt historia 2008 Natiivi selaintuki äänelle ja videolle. HTML5spesifikaation ensimmäinen luonnos julkaistaan Adobe lakkauttaa Flash Player mobiilialustakehityksen (nykyhetki) 80-90% selaimista tukee HTML5 <audio> ja <video>:ta loppu (tulevaisuus) HTML5-spesifikaation suositus julkaistaan. and
10 Ää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
11 Ääniteoriaa
12 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
13 Videoteoriaa
14 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ä
15 Koodekit ja säiliötiedostomuodot
16 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
17 Ää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)
18 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'
19 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'
20 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'
21 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'
22 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'
23 Ää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
24 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)
25 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')
26 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'
27 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'
28 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'
29 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
30 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
31 Säiliötiedostomuodot Verkon kannalta oleellisimmat WAV Vain ääni MPEG Ogg WebM Muita suosittuja säiliötiedostomuotoja Kuville (esim. TIFF) Multimedialle (esim. Matroska)
32 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'
33 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')
34 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'
35 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'
36 Ää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
37 Ää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)
38 Ää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)
39 Ääni- ja videotiedostojen muuntaminen HandBreak Videotiedostojen muuntaminen formaatista toiseen.mp4 (ja.mkv) tuettuna Paljon asetuksia Työpöytäsovellus (kaikille käyttöjärjestelmille)
40 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
41 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
42 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
43 HTML5 mediaelementit ja niiden rajapinnat
44 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.
45 HTML5 mediaelementtien selaintuen vertailu HTML5 mediaelementti Chrome Firefox IE Opera Safari <audio> <video> <source> (?) (?) <track> ei
46 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'").
47 HTML5 <audio>:n peruskäyttö
48 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
49 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 ").
50 HTML5 <video>:n peruskäyttö
51 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.
52 HTML5 <source>:n peruskäyttö
53 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
54 HTML5 <track>:n peruskäyttö
55 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
56 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
57 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
58 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
59 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
60 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)
61 HTML5 <audio>:n rajapintojen peruskäyttö
62 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
63 Kuvien esilatauksen peruskäyttö
64 Äänien esilatauksen peruskäyttö
65
66 Ääni kaikille käyttäjille
67
68
69 audio.js -kirjaston peruskäyttö
70 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)
71 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
72 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, google.com/p/mongoose/) tai 2) siirrä verkkosivut kurssin DIMEverkkopalvelimelle
73 Videoeditointi selaimessa
74 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
75 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ä Ää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
76 Ääniefektit Ääniefektit ovat hyödyllisiä ja sopivat erittäin hyvin esimerkiksi peleihin tukemaan vuorovaikutusta Ilmaisia ääniefektejä esim.
77 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
78 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> 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
79 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
80 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, google.com/p/mongoose/) tai 2) siirrä verkkosivut kurssin DIMEverkkopalvelimelle
81 JavaScript API:t
82 Puheentunnistus, konekääntäminen ja puhesynteesi Puheentunnistus Konekääntäminen Puhesynteesi Puhe kielellä A Teksti kielellä A Teksti kielellä B Puhe kielellä B
83 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
84
85
86 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
87
88 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
89
90
91 Yhteenveto ja tehtävänanto
92 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,
93 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 klo mennessä
94 Linkkejä com/2011/03/11/syncing-content-with-html5-video/ org/wiki/video_type_parameters#browser_support
95 KIITOS!
AV-muotojen migraatiotyöpaja - ääni. KDK-pitkäaikaissäilytys 2013 -seminaari 6.5.2013 / Juha Lehtonen
AV-muotojen migraatiotyöpaja - ääni KDK-pitkäaikaissäilytys 2013 -seminaari 6.5.2013 / Juha Lehtonen Äänimuodot Ääneen vaikuttavia asioita Taajuudet Äänen voimakkuus Kanavien määrä Näytteistys Bittisyvyys
LisätiedotHTML5 video, audio, canvas. Mirja Jaakkola
HTML5 video, audio, canvas Mirja Jaakkola Video webbisivulla HTML5 mahdollistaa videon lisäämisen webbi-sivuille ilman plugineja. Yleisimmät videoformaatit webissä: Mpeg-4 eli H.264 Ogg Flash Perustuu
LisätiedotHarjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript)
Harjoitustyö 3: Verkkosivujen toiminnallisuus (JavaScript) Kurssin toisessa harjoitustyössä tutustutaan verkkosivujen toiminnallisuuden toteuttamiseen JavaScript:n avulla. Lisäksi käydään läpi verkkosivuston
LisätiedotLähetys- ja jakelutekniikat
Lähetys- ja jakelutekniikat Sami Andberg (Helsingin yliopisto) gamedbrains.tv / Andberg Consulting Oy Sisältöä Digitaalisen videon (ja äänen) tekniikasta Mediatiedostot, kehykset Kuva- ja äänivirrat Jakelutekniikat
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 5/8: Mediaelementit Edellinen
LisätiedotT Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mediatekniikan laitos / Informaatioverkostot
Selainohjelmointi Edistynyt verkkosivujen (JavaScript) kehitys T-111.1100 Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) DI Mari Markku HirviLaine Mediatekniikan laitos
LisätiedotMuistio. Att:Videokerho Monitori ry:n jäsenet SUB: ÄÄNI-KUVA- JA VIDEOTIEDOSTOFORMAATIT. 1 Tiedostojärjestelmistä
Pvm:01.03.2011 Att:Videokerho Monitori ry:n jäsenet SUB: ÄÄNI-KUVA- JA VIDEOTIEDOSTOFORMAATIT 1 Tiedostojärjestelmistä Tietokoneiden sisäisessä tietojenkäsittelyssä ja tietojen hallinnassa on käytössä
LisätiedotLangattoman kotiverkon mahdollisuudet
Langattoman kotiverkon mahdollisuudet Tietoisku 5.4.2016 mikko.kaariainen@opisto.hel.fi Lataa tietoiskun materiaali netistä, kirjoita osoite selaimen osoitelokeroon: opi.opisto.hel.fi/mikko Tietoverkot
Lisätiedot9 Multimedian elementtejä: ääni Webissä
9 Multimedian elementtejä: ääni Webissä Ääni on multimedian ja siten hypermedian keskeisiä osa-alueita, joka on kuitenkin tietokonemaailmassa ollut pitkään vähemmällä huomiolla Ääniä käytetään: - sellaisenaan
LisätiedotFormaattien muunnokset 01012016 pva
Formaattien muunnokset 01012016 pva 1. VLC media player 2. Videon katselu 3. Audioformaatin muunnos 4. Videoformaatin muunnos 5. Extraa. Videoformaatin muunnos-2 6. Testaus Yleistä Digitoitu multimedia
LisätiedotVerkkoliittymän ohje. F-Secure Online Backup Service for Consumers 2.1
Verkkoliittymän ohje F-Secure Online Backup Service for Consumers 2.1 F-Secure Online Backup Service for Consumers -verkkoliittymän ohje... 2 Johdanto... 2 Mikä F-Secure Online Backup Service for Consumers
LisätiedotAlkuun HTML5 peliohjelmoinnissa
Paavo Räisänen Alkuun HTML5 peliohjelmoinnissa www.ohjelmoimaan.net Tätä opasta saa vapaasti kopioida ja levittää ei kaupallisissa tarkoituksissa. Sisällysluettelo 1: Alkusanat 2: Alkuun 3: Pelinäkymä
LisätiedotSähköiset sisällöt yleisiin kirjastoihin - hanke Turku 10.9.2013 Aija Laine aija.laine@turku.fi
Sähköiset sisällöt yleisiin kirjastoihin - hanke Turku 10.9.2013 Aija Laine aija.laine@turku.fi E-kirjalla on monia määritelmiä ja monta nimeä Tiedosto, joka käsittää kirjan lukijalle välittyvän sisällön
LisätiedotJWT 2016 luento 11. to 21.4.2016 klo 14-15. Aulikki Hyrskykari. PinniB 1097. Aulikki Hyrskykari
JWT 2016 luento 11 to 21.4.2016 klo 14-15 Aulikki Hyrskykari PinniB 1097 1 Viime luennolla o AJAX ja JSON, harjoitustyön tehtävänanto, vierailuluento avoimesta datasta Tänään o APIt rajapinnoista yleisesti
LisätiedotVerkkojulkaisualusta Moniviestin.
Verkkojulkaisualusta Moniviestin http://moniviestin.jyu.fi Mikä on Moniviestin? http://moniviestin.jyu.fi Jyväskylän yliopiston virtuaaliyliopistohankkeen kehittämä verkkojulkaisualusta Hyödynnetään kaikkia
LisätiedotVideoeditointi: Adobe Premiere Pro CS4
Videoeditointi: Adobe Premiere Pro CS4 Sisältö Yleistä... 1 Ohjelman käynnistäminen... 2 Videon käyttöönotto... 4 Videon editoiminen... 6 Efektien lisääminen ja hienosäätö... 8 Tekstien lisääminen... 9
LisätiedotAINEISTOJEN TEKNINEN OHJEISTUS 2009
AINEISTOJEN TEKNINEN OHJEISTUS 2009 VERKKOMAINONTA Esa Verkkomedia noudattaa verkkomainonnassa alan yleisiä standardeja. Bannerimainokset voidaan toimittaa jpg-, gif-, html- tai flash-muodoissa. Lisäksi
LisätiedotKurssijärjestelyt. ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mari Hirvi Informaatioverkostot / Mediatekniikan laitos
Kurssijärjestelyt ME-C2300 Verkkojulkaisemisen perusteet (5 op) Mari Hirvi Informaatioverkostot / Mediatekniikan laitos (Alkuperäiset luentokalvot: Markku Laine) 8. syyskuuta 2015 Luennon sisältö Kurssin
LisätiedotSyntysähköisten. Markus Merenmies / Kansallisarkisto
Syntysähköisten asiakirjojen j digitointi it i ti Markus Merenmies / Kansallisarkisto OSA I : Johdanto ja viitekehys Lähtökohtia Viranomaisten syntysähköisten asiakirjojen säilyttäminen yksinomaan sähköisessä
LisätiedotK-Lite Codec Pack v2.48 Asennusohje (toimii myös uusissa versioissa)
K-Lite Codec Pack v2.48 Asennusohje (toimii myös uusissa versioissa) Niko Rautava 2006 http://koti.mbnet.fi/nrautava Kannattaa ainakin kokeilla ensimmäisellä kerralla näiden ohjeitten mukaan, koska tässä
LisätiedotEdellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla
25.3.2014 Aulikki Hyrskykari Edellinen luento o sisällön ryhmittelystä jatkoa o linkeistä (suhteelliset, absoluuttiset, sivun sisäiset) o taulukot o kuvat verkkosivulla Tällä kertaa o Videotiedostot -
LisätiedotLyhyen videotyöpajan ohjelma (90 min)
Lyhyen videotyöpajan ohjelma (90 min) Päätarkoitus: - Lyhyiden selitysvideoiden tuotanto (max 3 minuuttia) yksinkertaisin keinoin Selitysvideoiden tuottaminen edistää reflektioprosessia liittyen omaan
LisätiedotDAISY. Esteetöntä julkaisua
DAISY Digital Accessible Information SYstem Esteetöntä julkaisua Markku Leino 27.4.2009 ESITYKSEN SISÄLTÖ Mikä on DAISY kirja? DAISY-järjestelmän lyhyt historia Miten rakentaa DAISY-kirja ja kirjatyypit
LisätiedotHeikki Helin Metatiedot ja tiedostomuodot
Heikki Helin 6.5.2013 Metatiedot ja tiedostomuodot KDK:n metatiedot ja tiedostomuodot KDK:n tekniset määritykset ja niiden väliset suhteet Aineistojen valmistelu ja paketointi on hyödyntäville organisaatioille
LisätiedotHelsingin Sanomat ipad
Helsingin Sanomat ipad Sovelluksen mainosaineistojen tekniset ohjeet: kokosivu ja etusivu 13.5.2013 SISÄLLYS ipad-mainokset 2 Tekniikka ja tiedostokoot 3 Orientaatio 4 Linkit: richie-modal-browser 4 Gesture
LisätiedotKurssijärjestelyt. CS-1180 Verkkojulkaisemisen perusteet (5 op) Hanna Hämäläinen Informaatioverkostot / Mediatekniikan laitos
Kurssijärjestelyt CS-1180 Verkkojulkaisemisen perusteet (5 op) Hanna Hämäläinen Informaatioverkostot / Mediatekniikan laitos (Alkuperäiset luentokalvot: Markku Laine) 10. Tammikuuta 2017 Luennon sisältö
LisätiedotToimeentulotuen sähköinen asiointi - Käyttöohje 29.1.2016 1
Toimeentulotuen sähköinen asiointi - Käyttöohje 1 Tuetut selaimet Internet Explorer 11 tai uudempi. Microsoft on päättänyt Internet Explorerin (IE) versioiden 8, 9 ja 10 tuen. Mozilla Firefox 3.5. tai
LisätiedotAV-muotojen migraatiotyöpaja - video. KDK-pitkäaikaissäilytys seminaari / Juha Lehtonen
AV-muotojen migraatiotyöpaja - video KDK-pitkäaikaissäilytys 2013 -seminaari 6.5.2013 / Juha Lehtonen Elävän kuvan muodot Videoon vaikuttavia asioita Kuvamuotojen ominaisuudet Audiomuotojen ominaisuudet
LisätiedotAJAX-konsepti AJAX. Asynkronisuus. Nykyisten web-ohjelmien ongelmia. Asynchronous JavaScript And XML
AJAX-konsepti AJAX Asynchronous JavaScript And XML Viimeisin muoti-ilmiö web-ohjelmoinissa, termi Ajax tuli käyttöön vuoden 2005 aikana Joukko teknologioita, joiden avulla voidaan toteuttaa uudenlaisen
LisätiedotJuha Henriksson. Digitaalinen äänentallennus. 5.12.2005 Dr. Juha Henriksson Finnish Jazz & Pop Archive
Juha Henriksson Digitaalinen äänentallennus 1 Äänen korkeus Ääni on värähtelyä, joka etenee ilmassa ilmamolekyylien harventumina ja tiivistyminä Äänen korkeutta kutsutaan äänen taajuudeksi Taajuuden yksikkö
LisätiedotKäytön aloittaminen NSZ-GS7. Verkkomediasoitin. Näyttökuvia, toimintoja ja teknisiä ominaisuuksia voidaan muuttua ilman erillistä ilmoitusta.
Käytön aloittaminen FI Verkkomediasoitin NSZ-GS7 Näyttökuvia, toimintoja ja teknisiä ominaisuuksia voidaan muuttua ilman erillistä ilmoitusta. Käytön aloittaminen: ON/STANDBY Kytkee tai katkaisee soittimen
LisätiedotJWT 2013 @Aulikki Hyrskykari, SIS, Tampereen yliopisto 4/11/2013
9.4.2013 Aulikki Hyrskykari Kuvat verkkosivulla Video ja ääni verkkosivulla Mittayksiköt Tekstin muotoilu Kirjasimet Lokeromalli Bittikarttakuvan koko (dimensiot) mitataan pikseleissä o esimerkkinä "3
LisätiedotÄänikirjojen kuvailuohje
Äänikirjojen kuvailuohje Daisy-työryhmä 7.4.2017 Tämä on RDA-kuvailuohje äänikirjoja (myös Daisy-äänikirjoja) varten. Ohjeessa on lueteltu vain äänikirjojen erityiskentät, muiden kenttien kuvailuohjeet
LisätiedotPÄIVITÄ TIETOKONEESI
PÄIVITÄ TIETOKONEESI HERVANNAN TIETOTORI Insinöörinkatu 38 33721 Tampere 040 800 7805 tietotori.hervanta@tampere.fi PÄIVITÄ TIETOKONEESI 2(17) Sisällys 1. Mihin päivityksiä tarvitaan?... 3 1.1. Windowsin
LisätiedotWWW-sivujen Verkkosivujen ulkoasu (CSS)
WWW-sivujen Verkkosivujen ulkoasu (CSS) T-111.1100 Digitaalisen median työvälineet (3 op) T-111.1100 Digitaalisen median työvälineet (3 op) Markku Laine DI Pia Tukkinen Mediatekniikan laitos Mediatekniikan
LisätiedotHTML5 -elementit jatkuu
HTML5 -elementit jatkuu Harjoitus: xhtml.htm -> html5.htm Muuta tämä xhtml dokumentti HTML5:ksi: http://users.metropolia.fi/~norrm/s12/kalasu/xhtml.htm Validoi myös koodisi: http://validator.w3.org/ "Mallivastaus"
LisätiedotProjektityö ja pelikehitys
Projektityö ja pelikehitys Selainohjelmointi (JavaScript) T-111.1100 Digitaalisen median työvälineet (3 op) ME-C2300 Verkkojulkaisemisen perusteet (5 op) Pinja Hokkanen DI Markku Laine Mediatekniikanlaitos
Lisätiedotipad musiikin opetuksessa TeknoDida 2011 Otto.Romanowski@iki.fi
ipad musiikin opetuksessa TeknoDida 2011 Otto.Romanowski@iki.fi Yleistä sormitietokoneista Kevyt, kätevä ja edullinen ( ) Mediaselain (mm. kuva, video, musiikki, web, youtube, kirjat, SoMe) Mediatuotanto
LisätiedotPLAY. TP1 Mobiili musiikkikasvatusteknologia MEDIAT Kuvan ja äänen tallentaminen, muokkaaminen ja jakaminen (v1.1)
PLAY TP1 Mobiili musiikkikasvatusteknologia MEDIAT Kuvan ja äänen tallentaminen, muokkaaminen ja jakaminen 4.2.2016 (v1.1), projektipäällikkö Sisältö Kuvan ja äänen tallentaminen, muokkaaminen ja jakaminen
LisätiedotJohdanto. Toteuttajat. Tämän tutkimuksen tiedonkeruun on toteuttanut Consumer Compass Oy IFPI Musiikkituottajat ry:n käytettäväksi.
Johdanto Toteuttajat Tämän tutkimuksen tiedonkeruun on toteuttanut Consumer Compass Oy IFPI Musiikkituottajat ry:n käytettäväksi. Tutkimuksen tavoite Tutkimuksen päämaalina oli selvittää kuluttajien mielipiteitä
LisätiedotTero Puustinen MEDIAN SUORATOISTO. Opinnäytetyö Tietojenkäsittelyn koulutusohjelma. Joulukuu 2013
Tero Puustinen MEDIAN SUORATOISTO Opinnäytetyö Tietojenkäsittelyn koulutusohjelma Joulukuu 2013 KUVAILULEHTI Opinnäytetyön päivämäärä 3.12.2013 Tekijä(t) Tero Puustinen Nimeke Koulutusohjelma ja suuntautuminen
LisätiedotAlma-mobiiliverkosto aineisto-ohjeet. Päivitetty 13.11.2014
Alma-mobiiliverkosto aineisto-ohjeet Päivitetty 13.11.2014 Rich media ratkaisut helposti Alman medioihin Seuraavat mainosmuodot toteutetaan kaikkiin Alman mobiilipalveluihin ilman teknisiä tuotantokustannuksia:
LisätiedotRadio R 4.0 IntelliLink Usein kysytyt kysymykset
Sisältö 1. Audio... 1 2. Puhelin... 2 3. Apple CarPlay... 2 4. Android Auto... 5 5. Galleria... 7 6. Muuta... 7 1. Audio K: Miten vaihdan äänilähdettä, esimerkiksi FM-radiosta USB:lle? V: Vaihtaaksesi
LisätiedotTikon Web-sovellukset
Toukokuu 2015 1 (11) Tikon Web-sovellukset Toukokuu 2015 2 (11) 1 Johdanto... 3 2 Silverlight sovellukset... 3 2.1 Windows... 3 2.1.1 Microsoft Silverlight... 3 2.1.2 Tablet-laitteet... 4 2.1.3 Selaimet...
LisätiedotPÄIVITÄ TIETOKONEESI
PÄIVITÄ TIETOKONEESI SAMPOLAN KIRJASTO TIETOTORI Sammonkatu 2 33540 Tampere 040 800 7816 tietotori.sampola@tampere.fi PÄIVITÄ TIETOKONEESI 2(16) Sisällys 1. Mihin päivityksiä tarvitaan?... 3 1.1. Windowsin
LisätiedotEntiteetit erotetaan muusta tekstistä & ja puolipiste. esim. copyright-merkki näkyy sivulla
1 ENTITEETIT Tehtävä 1. Tietokoneet ja käyttöjärjestelmät käyttävät erilaisia merkkijärjestelmiä ja varsinkin Internetin alkutaipaleella aiheutti sen, että jotkut merkit eivät näkyneet kaikilla oikein.
LisätiedotLisätehtävät. Frantic 2015 sivu 1 www.frantic.com
Lisätehtävät Frantic 2015 sivu 1 www.frantic.com Fontit - Google fonts Fonttien käyttäminen verkossa ilman uusien fonttien lataamista on melko rajattua, sillä koskaan ei voi tietää mitä fontteja vastaanottajan
LisätiedotSivuston tiedotemreemir.com
Sivuston tiedotemreemir.com Luotu Maaliskuu 10 2019 18:41 PM Pisteet66/100 SEO Sisältö Otsikko Emre Emir, Full-Stack Web Developer Pituus : 35 Täydellistä, otsikkosi sisältää väliltä 10 ja 70 kirjainta.
LisätiedotVideokuvan siirtäminen kamerasta tietokoneelle Windows Movie Maker -ohjelman avulla
Videokuvan siirtäminen kamerasta tietokoneelle Windows Movie Maker -ohjelman avulla 1. Digivideokamera liitetään tietokoneeseen FireWire-piuhalla. (Liitännällä on useita eri nimiä: myös IEEE 1394, DV,
LisätiedotTikon Web-sovellukset
Kesäkuu 2017 1 (8) Tikon Web-sovellukset Kesäkuu 2017 2 (8) 1 Johdanto... 3 2 HTML5 sovellukset... 3 2.1 Tuetut selaimet... 3 2.2 Mobiililaitteet... 3 3 Muita ohjeita... 5 3.1 Yhteensopivuus -tila (Internet
LisätiedotSISÄLLYSLUETTELO JOHDANTO 3 TUOTETAKUU 3 Hyväksyntätiedot 3 YLEISKATSAUS 4 OMINAISUUDET 5 PÄÄRAKENNE 6 AMMATTIMAINEN VESITIIVIS RAKENNE 7 ASENNUS 8
SISÄLLYSLUETTELO JOHDANTO 3 TUOTETAKUU 3 Hyväksyntätiedot 3 YLEISKATSAUS 4 OMINAISUUDET 5 PÄÄRAKENNE 6 AMMATTIMAINEN VESITIIVIS RAKENNE 7 ASENNUS 8 KÄYTTÖOHJE 12 TIEDOSTON TALLENTAMINEN JA ESITTÄMINEN
LisätiedotOhjeita informaation saavutettavuuteen
Ohjeita informaation saavutettavuuteen Tarkoitus Kasvattaa tietoisuutta ja lisätä esteettömän informaation aiheen näkyvyyttä ja sen merkitystä elinikäisen tasapuolisen oppimisen mahdollisuuksista Tukea
LisätiedotTulevaisuuden radio. Puheenvuoro Radiovuosi 2010 tilaisuudessa 21.1.2010 Tuija Aalto YLE Uudet palvelut Tulevaisuus Lab
Tulevaisuuden radio Puheenvuoro Radiovuosi 2010 tilaisuudessa 21.1.2010 Tulevaisuus Lab Mediakäytön muutoksien ennakointi Avoin innovaatio ja tuotekehitys Toimintatapana verkostoituminen ja yhteistyö
LisätiedotVisma Fivaldi. Ohjeet Java web startin ja HTML5-työkalun aktivointiin
Visma Fivaldi Ohjeet Java web startin ja HTML5-työkalun aktivointiin Visma Software Oy pidättää itsellään oikeuden mahdollisiin parannuksiin ja/tai muutoksiin tässä oppaassa ja/tai ohjelmassa ilman eri
LisätiedotTabletit opetuskäytössä - työpaja
Tabletit opetuskäytössä - työpaja Maakunnallinen lukioveso 27.10.2012 Markus Maunula, FM Centria ammattikorkeakoulu Mitä ovat tabletit? Tabletit opetuksessa Kolme ekosysteemia Sovellukset Sisältö ipad
LisätiedotOpintopolku info yhteistyöoppilaitoksille 27.4.2016 13.00 14 Osoitteessa https://connectpro.helsinki.fi/opintopolku/
Opintopolku info yhteistyöoppilaitoksille 27.4.2016 13.00 14 Osoitteessa https://connectpro.helsinki.fi/opintopolku/ Mikä on Opintopolku? Opintopolku.fi palvelu on sähköinen palvelukokonaisuus, josta löytyy
LisätiedotEcho360 - luentovideot. Ohjeita opiskelijalle
Echo360 - luentovideot Ohjeita opiskelijalle Sisältö Mikä on Echo360 Echo360 Moodlen kurssialueilla Videoiden katsominen Omat muistiinpanot videoissa Live-luennon katsominen Oman Echo360 videokirjaston
LisätiedotTekninen suunnitelma - StatbeatMOBILE
Tekninen suunnitelma - StatbeatMOBILE Versio Päivämäärä Henkilö Kuvaus 1.0 13.12.2013 Pöyry Alustava rakenne ja sisältö 1.1 22.12.2013 Pöyry Lisätty tekstiä ilmoituksiin, turvallisuuteen ja sisäiseen API:in
LisätiedotKäyttöohje. Painikkeet:
Käyttöohje Painikkeet: 1. PLAY: Päällä/pois päältä Toisto/Pysäytys 2. M: Valinta/Vahvistus 3. ON/OFF: Virtapainike soittimen päällä 4 Vol+: Äänenvoimakkuuden lisäys 5 Vol-: Äänenvoimakkuuden vähennys :
LisätiedotMediaelementit. Mirja Jaakkola
Mediaelementit Mirja Jaakkola Sisältö 3. Multimedia 4. Animaatio 7. Gif-animaatio 8. Flash-animaatio 9. Ääni 10.Ääni object-elementillä 11.Video 12.Videon lisääminen www-sivulle 13.Flash-video 16.Lähteet
LisätiedotSÄHKÖPOSTIOHJE. Opiskelijoiden Office 365 for Education -palveluun
SÄHKÖPOSTIOHJE Opiskelijoiden Office 365 for Education -palveluun 1 Ohjeen nimi Vastuuhenkilö Sähköpostiohje Järjestelmäasiantuntija Pekka Patrikka Voimaantulo 15.08.2013 Muutettu viimeksi 16.08.2013 Tarkistettu
LisätiedotTarjous sidonnaisuuspalvelusta
2017 Tarjous sidonnaisuuspalvelusta Jyrki Autio 2 Tarjous Sidonnaisuuspalvelu.fi TARJOUS SIDONNAISUUSPALVELUSTA Tarjous Kuntalain 810/2015, 84 S:n tarkoittaman sidonnaisuusrekisterin ylläpidosta. 1. ASIAKKAAN
LisätiedotARVO - verkkomateriaalien arviointiin
ARVO - verkkomateriaalien arviointiin Arvioitava kohde: Jenni Rikala: Aloittavan yrityksen suunnittelu, Arvioija: Heli Viinikainen, Arviointipäivämäärä: 12.3.2010 Osa-alue 7/8: Tekninen toteutus Edellinen
LisätiedotNOOX xperio herätyskello valvontakamera
NOOX xperio herätyskello valvontakamera Käyttöohje Ajan asetus Kun kellonaika on näytössä paina SET, ruudulla lukee nyt "2010" Aseta oikea aika UP ja DOWN näppäimillä ja paina SET uudelleen vahvistaakseni
LisätiedotGooglen palvelut synkronoinnin apuna. Kampin palvelukeskus Jukka Hanhinen, Urho Karjalainen, Rene Tigerstedt, Pirjo Salo
Googlen palvelut synkronoinnin apuna Kampin palvelukeskus 31.01.2018 Jukka Hanhinen, Urho Karjalainen, Rene Tigerstedt, Pirjo Salo Google-tili Jos käytät Gmail-sähköpostia niin sinulla on Google-tili (nn.nn@gmail.com)
LisätiedotC-kasetin digitointi Audacity-ohjelmalla
Digitointiohjeita_Kasetti 10.7.2014 1 C-kasetin digitointi Audacity-ohjelmalla I Kasetin tallennus tietokoneelle Kytke virta tietokoneeseen ja näyttöön. Kasettisoitin saa virtansa tietokoneesta. Käynnistä
Lisätiedotedocker PUBLISH! -paketinhallinnan käyttöohje 9/2015
edocker PUBLISH! -paketinhallinnan käyttöohje 9/2015 Uusien EDTPLIB- ja PDF -pakettien vienti ohjatulla toiminnolla...3 Tiedoston tarkistus...3 Kohdejulkaisun valinta... 4 Numeron tiedot... 5 Yhteenveto...6
LisätiedotEcho360 - luentovideot
Echo360 - luentovideot Ohjeita opiskelijalle Mikä on Echo360 Echo360 Moodlen kurssialueilla Videoiden katsominen Omat muistiinpanot videoissa Live-luennon katsominen Oman Echo360 videokirjaston käyttö
Lisätiedot4K DVB-T2 / DVB-S2 Android Suoratoistin Kauko-Ohjattavan Hiiren Kanssa
Yleistä tietoa Liitä tämä DVB-T2/S2 4K -suoratoistojärjestelmä televisioon ja suoratoista elokuvia, päivitä Facebookia, katsele kuvia tai suunnittele peli-iltaa ystäviesi kanssa TV-näytön kautta. Tämä
Lisätiedot4K DVB-T2 / DVB-S2 Android Suoratoistin Kauko-Ohjattavan Hiiren Kanssa
Yleistä tietoa Liitä tämä DVB-T2/S2 4K -suoratoistojärjestelmä televisioon ja suoratoista elokuvia, päivitä Facebookia, katsele kuvia tai suunnittele peli-iltaa ystäviesi kanssa TV-näytön kautta. Tämä
LisätiedotViasys VDC Stream Mallipohjaista projektinhallintaa. Tapani Parmanen ja Mia Rantakari Vianova Systems Finland Oy
Mallipohjaista projektinhallintaa Tapani Parmanen ja Mia Rantakari Vianova Systems Finland Oy Web-pohjainen projektiportaali, mikä tarjoaa tehokkaat työvälineet hankkeen tietojen hallintaan, aineiston
LisätiedotLATAA JA ASENNA - ILMAISOHJELMIA INTERNETISTÄ
LATAA JA ASENNA - ILMAISOHJELMIA INTERNETISTÄ SAMPOLAN KIRJASTO TIETOTORI Sammonkatu 2 33540 Tampere 040 800 7816 tietotori.sampola@tampere.fi LATAA JA ASENNA 2 Sisällysluettelo Sisällysluettelo... 2 Johdanto...
LisätiedotCT50A2601 Käyttöjärjestelmät Androidin ja Symbianin vertailu Seminaarityö
CT50A2601 Käyttöjärjestelmät Androidin ja Symbianin vertailu Seminaarityö 0349955 Pekka Hyvärinen 0342194 Joonas Heikelä 0327708 Miro Temonen 0350122 Sami Tuominen Yleistä Seminaarityö osa kurssia Käyttöjärjestelmät
LisätiedotLuento 12: XML ja metatieto
Luento 12: XML ja metatieto AS-0.110 XML-kuvauskielten perusteet Janne Kalliola XML ja metatieto Metatieto rakenne sanasto Resource Description Framework graafikuvaus XML Semanttinen Web agentit 2 1 Metatieto
LisätiedotVideoeditointi: Adobe Premiere Pro CC 2014
Videoeditointi: Adobe Premiere Pro CC 2014 Sisältö Yleistä... 1 Ohjelman käynnistäminen... 2 Videon käyttöönotto... 5 Videon editoiminen... 8 Efektien lisääminen ja hienosäätö... 10 Tekstien lisääminen...
LisätiedotEnnen päivityksen tekemistä
10UPGRADEUMFin24462F1 10-10-2002 16:32 Pagina 67 Johdanto Oheisella CD-ROM:lla voidaan päivittää DVDR980 ja DVDR985* -malliset eurooppalaiset tallentavat DVD-laitteet tasolle DVDR990, johon sisältyvät
LisätiedotLP-levyn digitointi Audacity-ohjelmalla
Digitointiohjeita_LP 10.7.2014 1 LP-levyn digitointi Audacity-ohjelmalla I Levyn tallennus tietokoneelle Kytke virta tietokoneeseen ja näyttöön. Levysoitin saa virtansa tietokoneesta. Käynnistä kopiointiohjelma
LisätiedotSivuston tiedotgoogle.com
Sivuston tiedotgoogle.com Luotu Tammikuu 14 2019 10:26 AM Pisteet37/100 SEO Sisältö Otsikko Google Pituus : 6 Ihannetapauksessa, sinun otsikkosi pitäisi sisältää väliltä 10 ja 70 kirjainta (välilyönnit
LisätiedotTekniset vaatimukset Tikon 6.4.1
Marraskuu 2014 1 (22) Tekniset vaatimukset Marraskuu 2014 2 (22) 1 Ohjelmapalvelin... 6 1.1 Ohjelmat... 6 1.1.1 Tuetut käyttöjärjestelmät... 6 1.1.2 Muut tarvittavat ohjelmat... 6 1.2 Palvelin (Suositus
LisätiedotLomakkeet HTML5. Elina Ulpovaara. Testaus: IE9 Firefox7 Opera11 Chrome
Lomakkeet HTML5 Elina Ulpovaara Testaus: IE9 Firefox7 Opera11 Chrome SELAIN Käyttäjä täyttää lomakkeen ja painaa lähetys-painiketta. Selain lähettää käyttäjän antamat tiedot palvelimelle lomakkeessa määrättyyn
LisätiedotPOP-UP -IKKUNOIDEN SALLIMINEN
Sivu 1(5) Windows XP SP2 www.procountor.com Windows XP:n Service Pack 2:n (SP2) mukana tulee Internet Explorer 6:een mukaan pop-up ikkunoiden esto toiminto. ProCountor -Taloushallinto-ohjelmistossa voidaan
LisätiedotVasteaika. Vasteaikaa koskeva ohje ei ole juuri muuttunut Robert B. Millerin vuonna 1968 pitämästä esityksestä:
Nielsen: "Olen tutkinut Webin käytettävyyttä vuodesta 1994, ja jokaisessa tutkimuksessa esiin on noussut sama asia: käyttäjät haluaisivat sivujen latautuvan nopeammin. Aluksi olin sitä mieltä, että käyttäjät
LisätiedotHTML 5 Johdanto. Mikä on HTML 5
HTML 5 Johdanto Antti-Jussi Lakanen Mikä on HTML 5 HTML 5 on uusistandardihtml-, XHTML-ja HTML DOM-määrittelyille HTML 4 tuliulosvuonna1999. Webbion muuttunut paljon niistä ajoista HTML 5:n speksion kesken.
LisätiedotTeknillinen korkeakoulu T-76.115 Tietojenkäsittelyopin ohjelmatyö. Testitapaukset - Koordinaattieditori
Testitapaukset - Koordinaattieditori Sisällysluettelo 1. Johdanto...3 2. Testattava järjestelmä...4 3. Toiminnallisuuden testitapaukset...5 3.1 Uuden projektin avaaminen...5 3.2 vaa olemassaoleva projekti...6
LisätiedotStarT-projektien ja hyvien käytänteiden ilmoittaminen verkkolomakkeella
StarT-projektien ja hyvien käytänteiden ilmoittaminen verkkolomakkeella Luethan nämä ohjeet huolella ennen lomakkeen täyttämistä. Sisällysluettelo: yleistietoa lomakkeen täyttäminen videoiden linkittäminen
LisätiedotTIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN
TIEDEJUTTUKURSSI 29.9.2011 FM VILLE SALMINEN YLEISTÄ LUENNOT (8 H) & TYÖPAJA (2 H) YHTEYSTIEDOT ville.salminen@oulu.fi VÄLINEET Tekstieditori Mieluummin Windowsin Notepad kuin esimerkiksi Microsoft Word
LisätiedotFiscal INFO TV -ohjelmisto koostuu kolmesta yksittäisestä ohjelmasta, Fiscal Media Player, Fiscal Media Manager ja Fiscal Media Server.
PIKA-ALOITUSOPAS Fiscal INFO TV -ohjelmisto koostuu kolmesta yksittäisestä ohjelmasta, Fiscal Media Player, Fiscal Media Manager ja Fiscal Media Server. Fiscal Media Manager -ohjelmalla tehdään kalenteri,
LisätiedotAdobe Audition CS6. Kuulosta parhaalta ADOBE AUDITION CS6 AU3 CS5.5 CS6. Adobe Audition CS6 Versioiden vertailu
Adobe Audition CS6 Versioiden vertailu Adobe Audition CS6 Kuulosta parhaalta ADOBE AUDITION CS6 AU3 CS5.5 CS6 AUDION EDITOINTI JA MONIEN RAITOJEN MIKSAUS Moniydin-/monisuoritinten optimointi Media-selain,
LisätiedotDigitaalisen median tekniikat. Luento 4: JavaScript
Digitaalisen median tekniikat Luento 4: JavaScript Luennot 1. Intro 2. XHTML 3. CSS 4. JavaScript Historia Syntaksi Dom Esimerkki: kuvagalleria 5. JavaScript-kirjastot & AJAX 6. Käytettävyys & saavutettavuus
LisätiedotKuvat. 1. Selaimien tunnistamat kuvatyypit
Kuvat Kuvia voi liittää xhtml-sivulle -elementillä -elementillä -elementillä lomakkeiden yhteydessä lähinnä painikenappeja taustakuvina -elementin background-attribuutilla tai
LisätiedotTavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja.
RUUTU DYNAAMINEN SPOTTI TEKNISET OHJEET Versio 1.0 Yleistä Tavallisen videomainoksen sijasta Ruudussa voidaan mainostauolla esittää dynaamisia spotteja. Dynaamiset spotit ovat flash mainoksia, jotka mahdollistavat
LisätiedotGimp JA MUUT KUVANKÄSITTELYOHJELMAT
Gimp JA MUUT KUVANKÄSITTELYOHJELMAT Daniela Lund Ti07 A241227 Linux-järjstelmät 01.12.2009 MIKÄ ON KUVANKÄSITTELYOHJELMA? Kuvankäsittelyohjelma on tietokoneohjelma, jolla muokataan digitaalisessa muodossa
LisätiedotSelaimen asetukset. Toukokuu 2014 1 (7) Selaimen asetukset. 1994-2014 Tikon Oy. All rights reserved.
Toukokuu 2014 1 (7) Selaimen asetukset Toukokuu 2014 2 (7) 1 Johdanto... 3 2 Windows... 3 3 Selaimet... 3 3.1 Yleiset asetukset (kaikki selaimet)... 3 3.1.1 Zoom-asetus... 3 3.1.2 Pop-up Blocker... 3 3.2
LisätiedotKuvaus. Tiedote. AMV-elokuvatoiminto. JPEG-kuvien selailutoiminto
Tämä on uuden sukupolven mediasoitin, joka tukee MP3-, WMA- ja WAV-tiedostoja. Täydellinen äänenlaatu, erittäin korkea luotettavuus ja hienostunut ulkonäkö tekevät siitä mestariteoksen kaikilla mahdollisilla
LisätiedotOpetusvideoiden taltiointi ja jakelu
Opetusvideoiden taltiointi ja jakelu Adobe Connect versio 9.0. https://connect.funet.fi Esimerkkejä opetusvideoista 1 Tehtävien mallivastausten selittäminen opiskelija voi katsoa videolta etukäteen, jotta
LisätiedotAudio - Nyt ja tulevaisuudessa
Audio - Nyt ja tulevaisuudessa 4.12.2017 Radio tavoittaa lähes kaikki suomalaiset viikoittain. Kuunteluaika, min/vrk Tavoittavuus %, viikko 196 195 191 190 188 187 183 181 179 181 96 95 95 96 95 95 94
LisätiedotMusiikin streaming-palvelut. Elvis-aamukahvitilaisuus 13.10.2015 Lumi Vesala /Teosto
Musiikin streaming-palvelut Elvis-aamukahvitilaisuus 13.10.2015 Lumi Vesala /Teosto 2 3 Digitaalinen vallankumous: median kulutustottumukset muuttuvat, bisnesmallit seuraavat perässä Nousussa 1. Av-streaming-palvelut:
LisätiedotKiitos tämän digitaalisen MP3-soittimen ostamisesta. Lue laitteen käyttöohje huolellisesti ennen käyttöä. Näin varmistat, että käytät laitetta oikein.
Kiitos tämän digitaalisen MP3-soittimen ostamisesta. Lue laitteen käyttöohje huolellisesti ennen käyttöä. Näin varmistat, että käytät laitetta oikein. A. Huomaa 1) Sammuta virta, kun et käytä laitetta.
LisätiedotVideomainonta ts.fi:ssä 2016
Videomainonta ts.fi:ssä 2016 1) Videoetusivu Videoetusivu takaa korkean huomioarvon! Helppo toteuttaa -> pelkän videotiedoston toimittaminen riittää Myös videoetusivun raamit voi halutessaan hyödyntään
LisätiedotKennelliiton Omakoira-jäsenpalvelu Ohje yhdistyksille, näyttelyn anominen
Kennelliiton Omakoira-jäsenpalvelu Ohje yhdistyksille, näyttelyn anominen Suomen Kennelliitto ry. 12.5.2014 2(11) Näyttelyn anominen Sisältö Oikeus näyttelyiden sähköiseen anomiseen... 3 Yhdistysvalinta...
Lisätiedot