HTML5-video

HTML5-video er et element introdusert i HTML5 -spesifikasjonen med sikte på å åpne nye standarder for reproduksjon av filmer og videoer, som alle erstatter elementet<object> .

Dette betyr at HTML5-kompatible nettlesere ikke trenger proprietære spillere (som Adobe Flash Player ) for å spille av videoer som er innebygd via taggen <video>.

Denne standarden hemmes av mangelen på enighet om hvilke videoformater som offisielt skal støttes.

Spesifikasjoner

HTML5 gir en rekke attributter som skal legges til åpningstaggen for <video>å indikere til nettleseren om og hvordan man bruker visse funksjoner:

Tekst kan settes inn mellom åpnings- ( <video>) og avsluttende ( )-tagger som nettlesere som ikke støtter HTML5 vil vise i stedet for videoen.</video>

Følgende HTML5-kodebit setter inn en video i WebM -format på siden og viser bruken av de tidligere sett attributtene (i eksemplet er alle vist, i virkeligheten er bare de ønskede satt inn).

<video src = "example.webm" width = "720" høyde = "576" poster = "immagine.jpg" kontrollerer autoplay loop preload = "auto" dempet> Denne teksten vises hvis nettleseren ikke støtter HTML5. </video>

Støttede videoformater

Gjeldende HTML5-regler spesifiserer ikke hvilke videoformater nettlesere skal støtte i video-taggen. Derfor kan de til dags dato støtte alle formater utviklerne deres anser som passende.

Debatt om enkeltformatet

HTML5 Working Group mener det er å foretrekke at det er ett enkelt videoformat som støttes av alle nettlesere. Det ideelle formatet bør:

Theora var opprinnelig den anbefalte videostandarden for HTML5, siden den ikke er bundet av noen kjente patenter. Den 10. desember 2007 ble imidlertid HTML5-utkastet endret, og erstattet referansen til Theora:

"Programmer bør støtte Theora -video og Vorbis -lyd , så vel som Ogg -beholderformatet ."

med:

«Det er nyttig for interoperabilitet hvis alle nettlesere støtter de samme kodekene. Det er imidlertid ingen kjent kodek som fungerer med alle eksisterende spillere: det er behov for en kodek som ikke krever betaling av lisenser, som er kompatibel med utviklingsmodellen for åpen kildekode , som har tilstrekkelig kvalitet til å kunne brukes og som er ingen potensielle skjulte patentrisikoer for selskaper. Denne delen vil bli oppdatert så snart ny informasjon er tilgjengelig."

Selv om Theora ikke er bundet av noen kjente patenter, er selskaper som Apple og Nokia bekymret for muligheten for skjulte patenter, hvis eiere kan vente på at et stort selskap skal bruke formatet og deretter kreve betaling for lisensene. Apple , Microsoft og andre selskaper har patentene til hovedkonkurrenten, H.264 -formatet .
Fjerningen av Ogg-formatet fra spesifikasjonen har blitt kritisert, da det ikke er grunn til å anta at Theora er bundet av "skjulte" patenter, og det er heller ikke mulig å fastslå at "skjulte" patenter også eksisterer i tilfellet H.264 .

Apple motsatte seg også bruken av Ogg -formatet i HTML - standarden (som uansett ikke er obligatorisk) og hevdet at mange enheter støtter andre formater mye lettere og at HTML aldri har håndhevet bruken av et bestemt format på ingenting.

H.264 / MPEG-4 AVC er mer utbredt og har god hastighet, komprimering, maskinvaredekoder og videokvalitet, men den er dekket av patenter. Med unntak av spesielle tilfeller må H.264-brukere betale lisensavgifter til MPEG LA , en gruppe H.264-patentinnehavere som inkluderer Microsoft og Apple . Av denne grunn ble den ikke ansett som egnet som en unik kodek for HTML5.

Googles oppkjøp av On2

Googles oppkjøp av On2 Technologies førte til opprettelsen av WebM -prosjektet , som bruker den patentfrie, åpen kildekode-videokodeken VP8 i en Matroska -beholder med Vorbis -lyd . Den støttes av nettleserne Google Chrome , Opera og Mozilla Firefox , så vel som av andre mindre brukte.

Da Google i januar 2011 kunngjorde sin intensjon om å fjerne innebygd H.264-støtte i Chrome, fikk den kritikk fra mange hold, inkludert Ars Technicas Peter Bright og Microsofts Tim Sneath (en av H. 264), som sammenlignet Googles trekk med erklæringen om esperanto som det offisielle språket i USA . Opera Softwares Haavard Moen kritiserte imidlertid Ars Technica-artikkelen sterkt og tydeliggjorde dens intensjon om å markedsføre WebM i produktene sine basert på åpenheten til Internett.

Nettleserstøtte

Nettleser Operativsystemer Siste stabile versjon Støttede videoformater

Ogg
MPEG
WebM
Theora H.264 VP8 VP9
Android-nettleser Android 4.4.4 "KitKat" (19. juni 2014) Fra 2.3 Fra 3.0 Fra 2.3 Nei
Krom Alle støttes Fra 18297 kr Manuell installasjon [1] Fra r47759 Fra r172738
Google Chrome Alle støttes 44.0.2403.125 (28. juli 2015) Fra 3.0 Fra 3.0 [2] Fra 6.0 Fra 29.0
Internet Explorer Windows 11.0.21 (14. juli 2015) Manuell installasjon Fra 9.0 Manuell installasjon Nei
Windows telefon 11,0 (10. februar 2014) Nei Fra 9.0 Nei
Windows RT 10,0 (14. februar 2011) Fra 10.0
Konqueror Alle støttes 4.14.3 (11. november 2014) Fra 4.4 [3]
Microsoft Edge Windows 10 20.10240.16384.0 (29. juli 2015) Fra 17 Fra 1.0 Nei Nei
Mozilla Firefox Windows 7+ 39,0 (2. juli 2015) Fra 3.5 Fra 21.0 Fra 4.0 Fra 28.0
Windows Vista Fra 22.0
Windows XP Manuell installasjon
Linux Fra 26.0
Android Fra 17.0
Mac os Fra 34.0
Firefox OS Fra 1.1
Opera Android 30.0.1856.93524 (24. juni 2015) Nei Fra 11.50 Fra 15.0 Fra 16.0
Symbian S60 12.0.22 (24. juni 2012)
Windows Mobile 10,0 (16. mars 2010)
Windows , macOS , Linux 30.0.1835.125 (14. juli 2015) Fra 10.50 Fra 24.0 Fra 10.60 Nei
Safari iOS 8.0.7 (30. juni 2015) Nei Fra 3.1 Nei Nei
Mac os Manuell installasjon Manuell installasjon
Web Alle støttes 3.16.3 (18. mai 2015) Fra 2.28 [4]

Formidling av formater

I april 2010, da Apples iPad var i ferd med å bli lansert, begynte mange nettsteder å tilby HTML5-video med H.264-kodeken i stedet for Flash for brukere identifisert som iPads.

Fra mai 2010 var ikke HTML5-videoer like populære som Flash-videoer, selv om noen nettsteder hadde begynt å eksperimentere med HTML5-videoer, inkludert Dailymotion (ved bruk av Theora- og Vorbis-formater), YouTube (både H.264 og i WebM) og Vimeo (i H ). .264).

Ifølge et YouTube-notat <video>oppfyller ikke varen for øyeblikket alle nettstedets behov. Hovedårsaken til dette er fraværet av et standardformat, mangelen på et innholdsbeskyttelsessystem og manglende evne til å vise videoer i fullskjerm. Selv Hulu har ikke tatt i bruk HTML5 på grunn av umuligheten av å tilpasse båndbredden som er tilgjengelig for brukeren og beskytte innholdet som vises. Netflix har dessuten ikke tatt i bruk HTML5 av lignende årsaker.

11. januar 2011 kunngjorde Googles Chromium-prosjekt fjerning av støtte for lukkede kodeker (spesielt H.264) fra fremtidige utgivelser av Chrome. Kunngjøringen spesifiserte at beslutningen ble tatt for å bidra til å spre patentfri HTML5 ved å favorisere bruken av open source-kodekene VP8 og Theora.

I april 2011 annonserte Google konverteringen av alle YouTube-videoer til WebM, og starter med 30 % av de mest viste.

Bruke flere videoformater samtidig

Mens man venter på at HTML5 Working Group skal fastslå en gang for alle hva som skal være det offisielle videoformatet for elementet <video>, er det mulig å sette inn <video>ulike multimedieformater i samme tag slik at nettleseren velger hvilket som skal åpnes. For å gjøre dette må du bruke elementet <source>.

Hvis du for eksempel vil sette inn "eksempel"-videoen på en side i de tre formatene Theora , H.264 og WebM , må du bruke følgende kode:

<videoplakat = "immagine.jpg" kontroller> <source src = "example.ogv" type = "video / ogg"> <source src = "example.mp4" type = "video / mp4"> <source src = "example.webm" type = "video / webm"> <p> Denne teksten vises hvis nettleseren din ikke støtter HTML5. </p> </video>

Ekstern eller intern plattform

Du kan legge inn en video ved å være vert for den på webserveren din ("self hosting ") eller på en ekstern plattform ( YouTube , Vimeo , ...) [5] [6] [7] [8] .

Egen server Ekstern plattform
PRO MOT PRO MOT
Totalt personvern og kontroll Lengre sideinnlastingstid Ulike enheter og nettlesere krever forskjellige filformater. Tredjepartstjenester er i stand til å konvertere videofilen. Videoen kan lastes ned gjennom spesielle nettjenester [9]
Ingen kan laste ned, slette eller utestenge videoen Hvis privat hosting ikke presterer, kan avspilling mangle Mye høyere båndbredde enn vanlig privat hosting Mindre personvern og kontroll
Ingen logo eller vannmerke Tregere og mindre pålitelig avspilling Raskere avspilling Utseende kan ikke tilpasses fullt ut
Fullt tilpassbare farger / utseende Ingen ytterligere kampanjer utenfor nettstedet

vert gir

Videoen stopper ikke før den er ferdig, uavhengig av brukerens internetthastighet Mulige vannmerker
Du holder besøkende på din egen side Potensielle kunder kan ved et uhell havne på videoen hvis den er på en ekstern plattform. Dette skjer ikke på en privat hosting Potensielle kunder kan ved et uhell havne på videoen Kunngjøringer fra eksterne selskaper under videoen
Ingen annonser eller videoer foreslått på slutten av videoen Mer begrenset SEO av plattformene

berømt

Bedre SEO (populære plattformer er bedre indeksert enn private nettsteder) Mulig sletting av videoen hvis den ikke oppfyller visse regler

Sammenligning med andre teknikker

Noen animasjoner laget med forskjellige teknikker er visuelt identiske eller ligner veldig på en innebygd video med taggen <video>. Hver teknikk har fordeler og ulemper, avhengig av dine behov [10] [11] [12] :

GIF CSS-animasjon Canvas \ WebGL SVG <video>
PROS: enkelhet i å lage,

tilpasningsevne til forskjellige enheter, kan lagres av brukeren med høyre museknapp , ingen programmering

CONS: svært begrensede muligheter, ingen interaktivitet

PROS: brede muligheter, liten vekt i KB, interaktivitet

CONS: ikke alltid tilpasningsdyktig

til alle enheter, programmering

nødvendig ikke alltid lett

PROS: brede muligheter, 3D-realisme, interaktivitet

CONS: ikke alltid tilpasningsdyktig

til alle enheter, programmering

nødvendig ikke alltid lett

PROS: brede muligheter, ingen begrensninger på pikselkvalitet, interaktivitet

CONS: ikke alltid tilpasningsdyktig

til alle enheter, programmering

nødvendig ikke alltid lett

PRO: svært brede muligheter med bruk av avansert animasjonsprogramvare som Premiere og After Effects , tilpasningsdyktig

til alle enheter, muligheten for å stoppe og gjenoppta videoen fra ethvert punkt, undertekster på alle språk, ingen programmering

CONS: ingen interaktivitet, tykke filer, video kan lastes ned av brukeren med høyre museknapp

Undertekster

Du kan lage undertekster på alle språk etter eget valg, synlige under videoen og også nedlastbare i TXT eller annet format [13] [14] :

< video id = "video" kontrollerer forhåndsinnlasting = "metadata" > < source src = "video / uno.mp4" type = "video / mp4" > < source src = "video / uno.webm" type = "video / webm " > < track label = " English " kind = " subtitles " srclang = " en " src = " captions / vtt / uno-en.vtt " default > < track label = " Deutsch " kind = " undertekster " srclang = " de " src = " captions / vtt / uno-de.vtt " > < track label = " Español " kind = " undertekster " srclang = " es " src = " captions / vtt / uno-es.vtt " > </ video >

CSS-stiler for undertekster

Du kan formatere undertekster med forskjellige stiler. De viktigste CSS-egenskapene for å gjøre dette er [15] :

  • color
  • opacity
  • visibility
  • text-decoration
  • text-shadow
  • background
  • outline
  • font
  • white-space

Eksempel:

:: cue ( v [ voice = 'Test' ]) { color : #ccc ; bakgrunn : # 0055dd ; }

Bruk som bakgrunn for et annet HTML-element

En HTML5-video kan settes inn som bakgrunn for et annet HTML-element, for eksempel et avsnitt, en DIV eller til og med hele nettstedet og gjøre det responsivt. Hvis den er satt inn som bakgrunn, akkurat som et bilde eller en CSS 3-gradient, kan den ikke lagres av brukeren med høyre museknapp og "lagre som" siden det vil være en dekorasjonsvideo og ikke en innholdsvideo [16] .

# myVideo { posisjon : fast ; høyre : 0 ; bunn : 0 ; min bredde : 100 % ; min-høyde : 100 % ; } . innhold { posisjon : fast ; bunn : 0 ; bakgrunn : rgba ( 0 , 0 , 0 , 0,5 ); farge : # f1f1f1 ; bredde : 100 % ; polstring : 20 px ; }

Formatering

Med CSS 3 , Canvas , SVG og WebGL er det mulig å formatere den innebygde videoen med <video>og legge til ulike effekter uten å direkte påvirke videoen med Adobe Premiere eller annen programvare [17] .

Animerte elementer foran videoen

@ keyframes overlay { 30 % { left : 0 ; bredde : 50 % ; } 50 % { bakgrunn : # 00f ; } 80 % { venstre : 80 % ; bredde : 20 % ; } 100 % { venstre : 60 % ; bredde : 40 % ; bakgrunn : # 00f ; } } figur # fashion { display : inline-block ; stilling : relativ ; skriftstørrelse : 0 ; margin : 0 ; } figur # motevideo { width : 100 % ; _

Filtre

Du kan legge til filtre foran videoen [18] også i responsiv bakgrunnsmodus [19] [20] (sepia, vignett , uskarphet ...):

CSS 3 video { posisjon : fast ; topp : 50 % ; venstre : 50 % ; min bredde : 100 % ; min-høyde : 100 % ; bredde : auto ; høyde : auto ; z-indeks : -1 ; transform : translateX ( -50 % ) translateY ( -50 % ); } SVG < video autoplay = "true" id = "vid" kontroller = "kontroller" loop = "loop" > < source src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type = "video / ogg" /> < source src = "https://upload.wikimedia.org/wikipedia/commons/transcoded/f/f6/Videoonwikipedia.ogv/Videoonwikipedia.ogv.480p.vp9.webm" type = "video / mp4" /> </ video > < svg id = 'image' version = "1.1" xmlns = "http://www.w3.org/2000/svg" > < defs > < filter id = "blurEffect" > < feGaussianBlur stdDeviation = " 4" /> </ filter > < filter id = "turbulence" > < feTurbulence baseFrequency = ".01" type = "fractalNoise" numOctaves = "3" frø = "23" stitchTiles = "stitch" /> </ filter > < filter id = "blur" > < feGaussianBlur stdDeviation = " 10,3" resultat = "outBlur" /> </ filter > < filter id = "inverse" > < feComponentTransfer > < feFuncR type = "tabell" tableValues ​​​​= "1 0" /> < feFuncG type = "tabell" tableValues ​​​​= "1 0" /> < feFuncB type = "tabell" tableValues ​​​​= "1 0" /> </ feComponentTransfer > </ filter >

Masker

Du kan lage SVG- eller CSS3-masker som er geometriske former med en video inni [21] [22] .

SVG <? xml-versjon = "1.0" frittstående = "nei"?> <! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.1 // EN" "http://www.w3.org/Graphics/SVG/1.1 /DTD/svg11.dtd "> < svg versjon = " 1.1 " xmlns = " https://www.w3.org/2000/svg " xmlns: xlink = " http://www.w3.org/1999 /xlink " > < defs > < maske > < text id = " text " x = " 10 " y = " 140 " font-size = " 150 " font-weight = " bold " font-family = " Verdana " fill = " white " > HEI </ text > </ mask > </ defs > < use xlink: href = " #text " /> </ svg > CSS 3 video { mask : url ( '#vmask' ); box-image : url ( 'text.svg' ); margin : 100 px ; }

Videoredigering med Canvas

Du kan gjøre manipulasjoner takket være HTML5 Canvas som Chroma Key -effekten [23] .

var prosessor ; prosessor . doLoad = funksjon doLoad () { this . video = dokument . getElementById ( 'video' ); dette . c1 = dokument . getElementById ( 'c1' ); dette . ctx1 = dette . c1 . getContext ( '2d' ); dette . c2 = dokument . getElementById ( 'c2' ); dette . ctx2 = dette . c2 . getContext ( '2d' ); la seg selv = dette ; dette . video . addEventListener ( 'play' , function () { self . width = self . video . videoWidth / 2 ; self . height = self . video . videoHeight / 2 ; self . timerCallback (); }, false ); },

WebGL Transitions

Du kan lage overganger mellom videoer med WebGL [24] .

const gardiner = nye Gardiner ({ container : "canvas" , pixelRatio : Math . min ( 1.5 , window . devicePixelRatio ), }); const params = { vertexShaderID : "vertexShader" , fragmentShaderID : "fragmentShader" , uniformer : { transition : { name : "uTransition" , type : "1f" , value : 0 , }, }, }; const multiTexturesPlane = new Plane ( gardiner , [... document . getElementsByClassName ( "plane" )], params );

Formatere videospilleren

Du kan også endre videospilleren som viser videoen (dvs. knappene, videofremdriftslinjen, omrisset ...) [25] . Et eksempel med CSS:

. kontroller knapp { border : none ; markør : peker ; bakgrunn : gjennomsiktig ; bakgrunnsstørrelse : inneholder ; bakgrunns-gjenta : ikke-gjenta ; } . kontrollerer fremdriften { display : block ; bredde : 100 % ; høyde : 81 % ; marg-topp : 0,125 rem ; grense : ingen ; farge : # 00ccff ; kantradius : 2 px ; }

Eksempler

  • Eksempel på en Chroma Key-effekt i en video laget med Canvas .

  • SVG-maskeeksempel i en video (med CSS3 kan du få samme effekt)

  • SVG-filtereksempel (samme effekt kan oppnås med CSS3)

Merknader

  1. ^ Tredjeparts kodekpakker er tilgjengelige.
  2. ^ Den 11. januar 2011 ble fjerningen av H.264-støtte annonsert på Chromium-bloggen; per 26. september 2022 er den imidlertid ikke fjernet ennå, og ingen ytterligere kunngjøringer har blitt gjort.
  3. ^ Ethvert format som støttes av Phonon på Qt 4.5.
  4. ^ Ethvert format som støttes av GStreamer på Webkit / GTK +.
  5. ^ YouTube-videoer kontra egenvert: Hvilken er bedre for deg ? , på Liquid Light . Hentet 10. februar 2021 .
  6. ^ Tim Neighbors, Self-Hosting Video Content -Pros and Cons , on Video Production by Invisible Harness , 6. juli 2017. Hentet 10. februar 2021 .
  7. ^ Brukervennlighet på nettstedet : YouTube Player vs. Self-hosted video , om de nyeste Voice of Customer og CX-trendene | Usabilla Blog , 4. august 2015. Hentet 10. februar 2021 .
  8. ^ Tumblr vs. Wordpress for Bands , på Small Business-Chron.com . Hentet 10. februar 2021 .
  9. ^ GRATIS YouTube Downloader - Gratis YouTube Video Downloader - Rask nedlasting - YouTube til MP4 , på Freemake . Hentet 10. februar 2021 .
  10. ^ HTML-animasjon vs GIF vs Video - Hippani , på hippani.com . Hentet 10. februar 2021 .
  11. ^ WebGL - Animation , på webglfundamentals.org . Hentet 10. februar 2021 .
  12. ^ 15 Canvas Animation Inspiration - HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀 , på codemyui.com . Hentet 10. februar 2021 .
  13. ^ Last ned undertekster fra Youtube, Viki, Viu, Vlive og mer , på downsub.com . Hentet 10. februar 2021 .
  14. ^ Last ned undertekster fra Youtube, Facebook, Viki, Dailymotion og mer , på savesubs.com . Hentet 10. februar 2021 .
  15. ^ Legge til bildetekster og undertekster til HTML5-video - Utviklerveiledninger | MDN , på developer.mozilla.org . Hentet 10. februar 2021 .
  16. ^ Full Page Background Video Styles , på CSS-Tricks , 28. mai 2017. Hentet 10. februar 2021 .
  17. ^ Dudley Storey, HTML5 -videoeffekter med CSS-blandingsmoduser , på den nye koden . Hentet 10. februar 2021 .
  18. ^ filtre , på codepen.io .
  19. ^ filtre , på codepen.io .
  20. ^ svg-filtre , på codepen.io .
  21. ^ Arbeide med skalerbar vektorgrafikk (SVG) i HTML5 Video Element , på mrbool.com . Hentet 10. februar 2021 .
  22. ^ svg , på codepen.io .
  23. ^ Manipulere video ved å bruke lerret - Web APIer | MDN , på developer.mozilla.org . Hentet 10. februar 2021 .
  24. ^ Team Codrops , WebGL Video Transitions with Curtains.js , i Codrops 7. oktober 2020. Hentet 10. februar 2021 .
  25. ^ Grunnleggende om styling av videospiller - Utviklerveiledninger | MDN , på developer.mozilla.org . Hentet 10. februar 2021 .

Andre prosjekter

Eksterne lenker