Innhold
- Hvor vi er nå
- Multimedia teksting og teksting
- WebVTT
- Fullskjermsvideo
- Synkronisere medieelementer
- Få tilgang til kamera og mikrofon
- WebRTC
Denne artikkelen dukket først opp i nummer 224 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
HTML5 gir innebygd multimedia til nettlesere. I gamle dager ble video og lyd overlevert til tredjeparts plugin-moduler (som kanskje ikke er tilgjengelig for alle enheter eller operativsystemer). Kommunikasjon mellom en nettleser og en plug-in er begrenset, og derfor var multimedia veldig mye en svart boks.
Så kom HTML5. Alle de store nettleserne støtter opprinnelig video og lyd (inkludert Internet Explorer), om enn med behovet for å dobbeltkode mediene dine, fordi IE og Safari bare støtter royalty-kodede kodeker.
Plutselig kan video utformes med CSS - du kan legge semi-transparente videoer over hverandre, sette grenser og bakgrunnsbilder, rotere dem på svev med overganger og transformasjoner og alle slags andre underverker.
Hvis du leser artikkelen jeg skrev med Vadim Makeev, vil du også vite at både lyd og video har enkle API-er som du kan bruke til å kontrollere avspilling fra JavaScript. Med noe enkelt JavaScript og CSS så komplisert eller så enkelt som utseendet ditt krever, kan du bygge din egen mediespiller.
Hvor vi er nå
Allerede ser det innfødt multimedia ganske groovy ut. Det er selvfølgelig ikke helt modent; nettlesere har vært mediespillere i mindre enn to år, mens utviklere av stasjonære mediaspillerprogrammer har perfeksjonert programmene sine i opptil 15 år.
Mange har lagt merke til at de fleste nettlesere har ganske svak lydavspilling. Spillutviklere sier ofte at den gjenværende bruken av Flash for dem er for lyd, ettersom noen nettlesere kan ta opptil to sekunder å utløse en HTML5-lydfil. Patrick Lauke dokumenterer hacking av en looping-lyd som ikke har en liten forsinkelse før looping.
Remy Sharp har dokumentert hvordan han kom over iOS-mangler med en teknikk han kalte Audio Sprites. Andre steder i iOS-land er must-lest HTML5-videoproblemer på iPad og hvordan du løser dem og uløste HTML5-videoproblemer på iOS.
Dette er selvfølgelig implementeringsdetaljer i stedet for spesifikasjonsproblemer, så når plattformene modnes, vil vi se mange av disse problemene forsvinne.
Så nå vet vi hvor vi er, la oss se på hva som kommer videre.
Multimedia teksting og teksting
Ettersom mer og mer innhold på nettet er i video eller lyd, bør du tenke på dem som ikke kan høre lydsporet, eller som engelsk ikke er morsmål for, så de vil lese så vel som å lytte, eller for de som ønsker å lese undertekster på sitt eget språk.
Kommer snart til nettlesere i nærheten av deg, er undertekster og teksting, gjennom kraften til HTML5 spor> element, som synkroniserer en fil med tekst og tidsinformasjon med en mediefil, og viser teksten til rett tid. Dette kraftige elementet lever som et barn av videoen> eller lyd> element, og peker på en undertekstfil.
La oss ta en titt på noen av egenskapene:
spor src = undertekster.vtt kind = undertekster srclang = no label = "English">
SRC-attributtet peker på de eksterne tidsbestemte tekstsporene. Slagsattributtet forteller nettleseren om dette er undertekster (dialogen er transkribert og muligens oversatt fordi det ellers ikke ville forstås), bildetekster (transkripsjon eller oversettelse av dialogen, lydeffekter, musikalske signaler og annen relevant lydinformasjon som passer for når lyd er utilgjengelig eller ikke tydelig hørbar), beskrivelser (tekstbeskrivelser av videokomponenten til mediaressursen, beregnet på lydsyntese når den visuelle komponenten er tilslørt, utilgjengelig eller ikke brukbar, for eksempel fordi brukeren kommuniserer med applikasjonen uten skjerm under kjøring, eller fordi brukeren er blind), kapitler eller metadata. Standard er teksting.
De srclang attributt forteller nettleseren hvilket språk tekstfilene er på og lar deg knytte mer enn ett sett til en video eller lyd - slik at du kan tilby undertekster på flere språk. Etiketten er valgfri og er en brukervennlig tittel for sporet.
videokontroller> kilde src = film.mp4 type = video / mp4> kilde src = film.webm type = video / webm> sporetype = undertekster srclang = en src = undertekster-en.vtt> sporetype = undertekster srclang = de src = subtitles-de.vtt label = "German">! - kom tilbake innhold, f.eks. en Flash-film eller YouTube-innebyggingskode / video>
Spesifikasjonen stiller ingen krav til nettleserne for hvordan de kommuniserer tilstedeværelsen av tidsbestemt tekst, og ingen fraktlesere har støtte for den ennå, men vi kan eksperimentere med en Polyfill.
For rask prototyping liker jeg å bruke Playr, et lett manus fra Julien Villetorte. Den er tilgjengelig på Github. Bare ta tak i bildene som utgjør Playr UI, legg til playr.js og playr.css Legg til kursnavnet øverst på siden din playr_video til videokoden din, og siden din blir gjengitt med en sexy Playr-hud og muligheten til å velge mellom tekstingene dine.
Merk at brukergrensesnittet er laget av Polyfill og ikke er innebygd i noen nettleser ennå - men vil snart være. Det jobbes med av Opera, Microsoft og Google, og det er sannsynlig at nettleserne vil tilby lignende brukergrensesnitt og funksjonalitet.
De spor> element forutsetter heller ikke noe bestemt format for den tidsbestemte teksten. I dette tilfellet er det en webVTT-fil, men spor>, som img>, video> og lyd> er format agnostisk. Alle nettlesere vil støtte det nye WebVTT-formatet, og Microsoft har kunngjort at de også vil støtte et eldre format kalt TTML.
WebVTT
WebVTT er et helt nytt tidsbestemt tekstformat. Internett er fulle av andre formater - minst 50 - så hvorfor finne på et nytt? Fordi vi trenger et enkelt format.
WebVTT er veldig enkelt å lage. Dette er et viktig poeng: hvis det er for vanskelig, vil ikke forfattere bry seg - og ingen mengde nettleserstøtte for nye elementer og API-er kommer til å gjøre multimediainnhold tilgjengelig hvis det ikke er noen undertekstvideoer der ute. På det enkleste ser WebVTT slik ut:
WEBVTT
00:01.000 --> 00:02.000
Hallo
00:03.000 --> 00:05.000
Verden
Det er ganske enkelt en UTF-8-kodet tekstfil, med WEBVTT øverst. Tidspunkter er angitt som forskyvning fra starten av media. Så "Hei" vil vises fra ett sekund til videoen til to sekunder fra starten av videoen (vises derfor i ett sekund). Teksting vil forsvinne til tre sekunder fra starten, på hvilket tidspunkt “Verden” vises.
Det blir ikke mye enklere. Selvfølgelig kan du gjøre mer hvis du vil. For eksempel kan du endre posisjonen til underteksten (slik at du ikke får hvit tekst på en hvit del av rammen, for eksempel).
00: 03.000 -> 00: 05.000 L: -85%
Dette flytter underteksten 85 prosent av mediehøyden "opp" fra standardposisjonen nederst i videoen.
Du kan for eksempel endre tekststørrelse S: 150% øker størrelsen til 150 prosent av standardinnstillingen. Det er mulig å ha undertekster trinnvis (for eksempel med karaoketekster der linjen vises ett ord om gangen, men det forrige ordet ikke forsvinner når et nytt vises). Du kan style forskjellige høyttalers ord med forskjellige farger, og det er grunnleggende støtte for å utforme forskjellige ord med forskjellige farger. For mer informasjon besøk delphiki.com/webvtt/#cue-settings.
Enda viktigere enn de stilistiske alternativene er internasjonaliseringsalternativene som er tilgjengelige. WebVTT-spesifikasjonen bygger inn støtte fra høyre til venstre for språk som arabisk og hebraisk, vertikal støtte for språk som kinesisk og muligheten til å legge til Ruby-merknader som uttaltips for kinesisk, japansk og koreansk.
Hvis du vil eksperimentere med webVTT, ta tak i Playr og skriv. Operas Anne van Kesteren har skrevet en live webVTT-validator for å teste arbeidet ditt.
Fullskjermsvideo
Alle liker fullskjermsvideo. Alle unntatt HTML5-spesifikatorene, det vil si som ikke tillot det på lenge. WebKit drømte om sin egen JavaScript-metode som heter WebkitEnterFullscreen (), og implementerte API på en måte som bare kunne utløses hvis brukeren startet handlingen - som popup-vinduer, som ikke kan opprettes med mindre brukeren utfører en handling, for eksempel et klikk.
I mai 2011 kunngjorde WebKit at de ville implementere Mozillas egen smak av et fullskjerm-API. Denne API-en gjør at ethvert element kan gå i fullskjerm (ikke bare video>) - vil du kanskje
full skjerm lerret> spill eller videomoduler innebygd i en side via en iframe>. Skript kan også velge å ha alfanumerisk tastaturinngang aktivert under fullskjermvisning, noe som betyr at du kan lage ditt super spiffing plattformspill ved hjelp av lerret> API og det kan kjøre fullskjerm med full tastaturstøtte.
Da Opera også liker denne tilnærmingen, bør vi se noe som nærmer seg interoperabilitet. Inntil da kan vi fortsette å falske fullskjerm ved å gå i fullvindu og sette videodimensjonene til å være like vindusstørrelsen.
Synkronisere medieelementer
Evnen til å synkronisere medieelementer blir fortsatt spesifisert, så det er lenger unna implementering enn synkroniserte bildetekster og undertekster. Det vil tillate at flere relaterte medieelementer (video, lyd eller en blanding av begge) blir koblet.
Det er to hovedbrukstilfeller for dette. Tenk deg et nettsted som viser videoer av sportsbegivenheter: det kan være flere videoelementer, hver fra en annen kameravinkel - for eksempel en på hvert mål, en i luften og en som sporer ballen. Et nettsted som viser en konsert kan ha ett kamera på bassgitaren, et på gitaren, et på den peruanske nesefløyten. Å flytte søkefeltet, eller endre avspillingsfrekvensen til sakte film, på en video, bør påvirke hver av de andre videoene.
En annen viktig brukssak er tilgjengelighet. De spor> element lar oss synkronisere tekst til en video; muligheten til å synkronisere medieelementer lar oss synkronisere en annen video (for eksempel en film av noen som signerer ordene som er snakket i hovedvideoen) eller synkronisere et lydspor som beskriver handlingen i en video under dialogpauser.
Det er en hel Controller API spesifisert, men den enkleste måten å synkronisere medieelementer vil være erklærende ved å bruke mediagroup-attributtet på video> eller lyd>. Alle de med samme verdi for mediagroup vil bli synkronisert:
video mediagroup = "jedward" src = "bass-guitar.webm"> ../ video> video mediagroup = "jedward" src = "lead-guitar.webm"> ../ video> video mediagroup = "jedward" src = "idiot-1.webm"> ../ video> video mediagroup = "jedward" src = "idiot-2.webm"> ../ video>
Denne delen av markeringen synkroniserer fire kameraer på forskjellige musikere på en Jedward-konsert. Følgende synkroniserer lydbeskrivelse med den populære filmen Mankini Magic:
video mediagroup = "beskrevet-film" src = "mankini-magic.webm"> ../ video> lyd mediagroup = "beskrevet-film" src = "beskriv.ogg"> ../ lyd>
Dette spesifiseres fortsatt, så det er ingen nettleserstøtte og (så vidt jeg vet) ingen polyfills.
Få tilgang til kamera og mikrofon
Det er noen gjenværende bruksområder for plugin-moduler som HTML5 hittil ikke har klart å overvinne. Kopibeskyttende innhold med DRM er ett (se spørsmål og svar ovenfor og på neste side for mer om det). En annen er adaptiv streaming - endring av bithastighet osv. I henhold til nettverksforhold, selv om det blir jobbet med.
Tradisjonelt er territoriet til Flash-plugin-modulen, og HTML5 legger nå til muligheten for å koble til enhetens kamera og mikrofon. Tidligere kjent som HTML5 enhet>, er denne funksjonaliteten nå pakket inn i en API kalt getUserMedia. For å fortelle enheten hvilken type media vi ønsker å få, sender vi lyd eller video som argumenter. Fordi mange enheter har et fremovervendt kamera, som fanger brukerens bilde, og bakkamera, kan vi passere i tokens bruker eller miljø.
Først har vi detektere:
if (navigator.getUserMedia) {navigator.getUserMedia (’audio, video user’, successCallback, ¬ errorCallback);
Når vi har strømmer, kan vi bruke dem etter behov. Her replikerer vi ganske enkelt strømmen på siden ved å koble strømmen til kilden til et videoelement:
var video = document.getElementsByTagName (‘video’) [0] ... function successCallback (stream) {video.src = stream; }
Når vi har dette, er det enkelt å kopiere videoen til et lerretelement ved hjelp av drawImage for å hente den nåværende rammen av videoen, og tegne den på nytt hver 67 millisekund (så omtrent 15 bilder per sekund). Når det er kommet på lerretet, kan du få tilgang til pikslene via getImageData.
I et eksempel av Richard Tibbett fra Opera får du tilgang til lerretet med JavaScript for å utføre ansiktsgjenkjenning - i sanntid! - og når et ansikt er funnet, å tegne et magisk HTML5-bart på riktig sted.
getUserMedia støttes i Opera 12, Opera Mobile 12 og Canary builds
av Chrome. Mange flere eksempler på getUserMedia finner du her.
Å gi nettsteder tilgang til webkameraet ditt kan åpenbart skape betydelige personvernproblemer, slik at brukerne må melde seg på, akkurat som de har med geolokalisering å gjøre. Men det er et UI-problem i stedet for et teknisk problem.
Selvfølgelig er det bare mulig at designerne av getUserMedia API hadde andre bruksområder i tankene, i tillegg til å tegne bart. Den kan brukes til nettleserbaserte QR / strekkodelesere. Eller, mer spennende, utvidet virkelighet. HTML5-arbeidsgruppen spesifiserer for øyeblikket et peer-to-peer-API som lar deg koble kameraet og mikrofonen til video> og lyd> elementer i andres nettleser, noe som gjør det mulig å gjøre videokonferanser.
WebRTC
I mai 2011 kunngjorde Google WebRTC, en åpen teknologi for tale og video på nettet, basert på HTML5-spesifikasjonene. RTC står for "sanntidskommunikasjon", og er videokonferanse i nettleseren. Den kobler kameraet og mikrofonen til et videoelement> på en webside i vennens nettleser (og omvendt) via HTML5 PeerConnection API.
WebRTC bruker VP8 (videokodeken i WebM) og to lydkodeker optimalisert for tale med støy og ekko-kansellering, kalt iLBC, en smalbånds talekodek, og iSAC, en båndbreddeadaptiv bredbåndskodek. Som prosjektnettstedet sier, "Vi forventer å se WebRTC-støtte i Firefox, Opera og Chrome snart!"
Som du kan se, er HTML5 multimedia-støtte i ferd med å bli mye rikere. Som vanlig med HTML5, må implementeringene ta igjen spesifikasjonen - og spesifikasjonene må også være ferdige - men fremtiden ser virkelig spennende ut.
For mer om fremtiden for video, se spørsmål og svar med John Foliot og Silvia Pfeiffer
