13/09/2024
I en verden hvor videoindhold dominerer onlinekommunikation, er det essentielt at sikre, at vores videoer ikke kun er visuelt tiltalende, men også tilgængelige og kontrollerbare for alle brugere. Især på mobile enheder som iPhones, hvor skærmstørrelse og batteriforbrug kan være en faktor, er en gennemtænkt videoimplementering afgørende. Denne artikel dykker ned i, hvordan man kan skabe en inklusiv og progressivt forbedret løsning til HTML5 video, der fungerer problemfrit, selv på ældre browsere, og giver brugerne kontrol over deres medieoplevelse.
- Hvorfor Inklusive Videoafspilning?
- Grundlæggende Markup for Kontrol
- Progressiv Forbedring: CSS og Skjulte Knapper
- Styling af Afspilnings-/Pauseknapperne
- Styling af HTML5 Videoen
- JavaScript: Gør Knapperne Levende
- Hvad er 'prefers-reduced-motion'?
- Sammenligning af Tilgange
- Ofte Stillede Spørgsmål (FAQ)
- Konklusion
Hvorfor Inklusive Videoafspilning?
Traditionelle autoplay-videoer, der starter uden brugerens samtykke, kan være problematiske. For brugere med vestibulære lidelser kan pludselige bevægelser på skærmen forårsage symptomer som svimmelhed, kvalme og hovedpine. Derudover kan autoplay-videoer dræne batteriet unødvendigt på mobile enheder. Ved at tilbyde en klar afspilnings-/pauseknap giver vi brugerne magten til selv at bestemme, hvornår og om videoen skal afspilles. Dette er et vigtigt skridt mod at skabe en mere tilgængelig weboplevelse for alle.
Grundlæggende Markup for Kontrol
For at give brugerne kontrol, introducerer vi separate knapper til afspilning og pause. Selvom det kunne virke mere simpelt at have én knap, der skifter ikon, er dette ikke optimalt for brugere, der er afhængige af skærmlæsere. Separate knapper, hver med en klar ARIA-label, sikrer, at skærmlæsere kan kommunikere knappernes funktion tydeligt. Lad os se på den grundlæggende markup:
<button class="a-button m-video__button js-video-play-button" aria-pressed="true" aria-label="Afspil video" type="button"> <svg class="a-icon a-button__icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <title>Afspil video</title> <path d="M5.85355339,0.853553391 L12.2928932,7.29289322 C12.6834175,7.68341751 12.6834175,8.31658249 12.2928932,8.70710678 L5.85355339,15.1464466 C5.65829124,15.3417088 5.34170876,15.3417088 5.14644661,15.1464466 C5.05267842,15.0526784 5,14.9255015 5,14.7928932 L5,1.20710678 C5,0.930964406 5.22385763,0.707106781 5.5,0.707106781 C5.63260824,0.707106781 5.7597852,0.759785201 5.85355339,0.853553391 Z"></path> </svg> </button> <button class="a-button m-video__button js-video-pause-button" aria-pressed="false" aria-label="Sæt video på pause" type="button"> <svg class="a-icon a-button__icon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> <title>Sæt video på pause</title> <rect x="4" y="1" width="3" height="14" rx="1"></rect> <rect x="9" y="1" width="3" height="14" rx="1"></rect> </svg> </button> Nøgleattributter her inkluderer:
aria-pressed: Denne attribut vil blive opdateret dynamisk med JavaScript for at indikere knappens aktuelle tilstand (trykket eller ej).aria-label: Sikrer, at skærmlæsere læser knappens funktion højt, hvilket er afgørende for tilgængelighed.title: Viser en tooltip, når brugeren holder musen over knappen, hvilket giver visuel feedback.
Progressiv Forbedring: CSS og Skjulte Knapper
Vi anvender progressiv forbedring, hvilket betyder, at vi starter med en grundlæggende funktionalitet og derefter tilføjer forbedringer. For at håndtere browsere uden JavaScript eller med begrænset funktionalitet, tilføjer vi en klasse, der skjuler knapperne som standard:
.no-enhance .m-video__button { display: none; } Ved at tilføje klassen no-enhance til <html> elementet, sikrer vi, at knapperne kun vises, hvis browseren understøtter de nødvendige JavaScript-funktioner. Når JavaScript er aktivt og understøtter vores behov, fjernes denne klasse, og knapperne bliver synlige.
Styling af Afspilnings-/Pauseknapperne
Knapperne skal have et rent og brugervenligt design. Her er et eksempel på CSS til at style knapperne:
.a-button { background-color: #ffffff; border-radius: 100%; cursor: pointer; position: relative; transition: box-shadow 0.3s cubic-bezier(0.5, 0.61, 0.355, 1), opacity 0.3s cubic-bezier(0.5, 0.61, 0.355, 1); } .a-button:focus { box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.5); outline: none; } .a-button:hover { opacity: 0.75; } .a-button__icon { padding: 0.625rem; } .a-icon { fill: #000000; height: 2.1875rem; vertical-align: top; width: 2.1875rem; } @media screen and (min-width: 32em) { .a-icon { height: 2.5rem; width: 2.5rem; } } Disse stilarter giver knapperne et cirkulært udseende med en subtil hover-effekt. For ældre browsere kan der være behov for yderligere faldgruber (fallbacks) for `rem` enheder eller inline SVG-understøttelse, men dette falder uden for rammerne af denne grundlæggende guide.
Styling af HTML5 Videoen
Selve videoelementet kræver minimal styling, men det er vigtigt at positionere knapperne korrekt i forhold til videoen:
.m-video { background-color: #000000; position: relative; } .m-video__video { display: block; width: 100%; } .m-video__button { bottom: 0.9375rem; left: 0.9375rem; position: absolute; z-index: 20; } .m-video__button[aria-pressed="true"] { display: none; } Det afgørende stykke her er .m-video__button[aria-pressed="true"] { display: none; }. Denne regel sikrer, at den aktive knap (enten afspil eller pause) skjules, så kun den relevante knap er synlig. Når vi implementerer JavaScript, vil aria-pressed attributten blive opdateret, hvilket dynamisk vil styre synligheden af knapperne.
JavaScript: Gør Knapperne Levende
Nu til den vigtigste del: JavaScript, der får vores videoafspilning til at fungere. Vi starter med at tjekke browserens kompatibilitet:
/* Tjek om brugerens browser understøtter disse funktioner */ const enhance = "querySelector" in document && "addEventListener" in window && "classList" in document.documentElement; /* Hvis brugerens browser understøtter de nødvendige funktioner, fjernes 'no-enhance' klassen fra html elementet og vores video JS eksekveres */ if(enhance) { document.documentElement.classList.remove("no-enhance"); /* Find alle video 'molekyler' og instantiér en ny instans af Video klassen */ const videos = document.querySelectorAll(".js-video"); Array.from(videos).forEach((video) => { const videoEl = new Video(video); }); } Dette script tjekker for grundlæggende DOM-manipulations- og event-listener-kapaciteter. Hvis de er til stede, fjernes no-enhance klassen, og vi initialiserer vores Video klasse for hver video på siden.
Her er selve Video klassen, der håndterer afspilning, pause og tilgængelighedsfunktioner:
class Video { constructor(video) { this.videoContainer = video; this.video = this.videoContainer.querySelector(".js-video-video"); this.playButton = this.videoContainer.querySelector(".js-video-play-button"); this.pauseButton = this.videoContainer.querySelector(".js-video-pause-button"); this.prefersReducedMotion(); this.addEventListeners(); } prefersReducedMotion() { /* Hvis brugerens browser understøtter 'reduced motion' og brugeren har aktiveret det, fjernes autoplay attributten fra videoen og den pauses */ if(matchMedia("(prefers-reduced-motion)").matches) { this.video.removeAttribute("autoplay"); this.pauseVideo(); } } addEventListeners() { this.playButton.addEventListener("click", () => { this.playVideo(); /* Fokuser pauseknappen, så tastaturbrugere øjeblikkeligt kan sætte videoen på pause uden at skulle tabbe væk og tilbage igen */ this.pauseButton.focus(); }); this.pauseButton.addEventListener("click", () => { this.pauseVideo(); /* Fokuser afspilningsknappen, så tastaturbrugere øjeblikkeligt kan afspille videoen uden at skulle tabbe væk og tilbage igen */ this.playButton.focus(); }); } playVideo() { this.video.play(); /* Sæt afspilningsknappen som 'trykket', så den skjules, og pauseknappen vises i stedet */ this.playButton.setAttribute("aria-pressed", "true"); this.pauseButton.setAttribute("aria-pressed", "false"); } pauseVideo() { this.video.pause(); /* Sæt pauseknappen som 'trykket', så den skjules, og afspilningsknappen vises i stedet */ this.playButton.setAttribute("aria-pressed", "false"); this.pauseButton.setAttribute("aria-pressed", "true"); } } Denne klasse håndterer kernen af funktionaliteten: at afspille og pause videoen ved klik på de respektive knapper og opdatere aria-pressed attributterne for korrekt visuel feedback og skærmlæser-kompatibilitet. Fokus flyttes også til den modsatte knap efter et klik for at forbedre tastaturnavigationen.
Hvad er 'prefers-reduced-motion'?
prefers-reduced-motion er en medieforespørgsel, der giver brugerne mulighed for at angive i deres operativsystemsindstillinger, at de foretrækker mindre eller ingen bevægelse på skærmen. Dette er særligt vigtigt for personer med vestibulære lidelser eller følsomhed over for bevægelse. Funktionen er i øjeblikket understøttet i Safari, men forventes at blive bredere adopteret af andre browsere.
Aktivering af 'Reduced Motion' på Mac og iOS
For at aktivere denne funktion og teste dens effekt, kan du følge disse trin:
På iPhone/iPad (iOS):
- Åbn Indstillinger.
- Tryk på Generelt.
- Tryk på Tilgængelighed.
- Tryk på Reducer bevægelse.
- Slå Reducer bevægelse til.
På Mac:
- Åbn Systempræferencer.
- Klik på Tilgængelighed.
- Klik på Skærm i sidepanelet.
- Marker afkrydsningsfeltet Reducer bevægelse.
Når prefers-reduced-motion er aktiveret, vil vores JavaScript-kode automatisk fjerne autoplay attributten fra videoen og pause den, hvilket resulterer i en mere behagelig oplevelse for disse brugere.
Sammenligning af Tilgange
Lad os opsummere fordelene ved denne tilgang sammenlignet med simple autoplay-videoer eller animerede GIF'er:
| Funktion | Autoplay Video (Uden Kontrol) | Animeret GIF | Progressivt Forbedret HTML5 Video |
|---|---|---|---|
| Brugerkontrol | Ingen | Ingen | Ja (Afspil/Pause) |
| Tilgængelighed (Vestibulære Lidelser) | Potentielt problematisk | Potentielt problematisk | Ja (via 'prefers-reduced-motion' og knapper) |
| Filstørrelse/Optimering | Kan være stor | Ofte ineffektiv, ingen kompression | Optimerbar, bedre kompression |
| Skærmlæser Support | Begrænset | Meget begrænset | God (med ARIA-attributter) |
| Batteriforbrug | Højt (hvis autoplay) | Højt | Kontrollerbart |
Ofte Stillede Spørgsmål (FAQ)
Kan jeg bruge én knap til både afspilning og pause?
Ja, det er muligt, men det kræver mere kompleks JavaScript for at håndtere ikonskift og opdatere ARIA-attributter korrekt. Separate knapper giver en klarere semantisk struktur og er generelt nemmere at implementere tilgængeligt.
Hvad hvis brugeren har JavaScript deaktiveret?
Med vores progressive forbedringsstrategi vil videoen ikke autoplaye, og knapperne vil ikke være synlige. Videoen vil simpelthen ikke være interaktiv. Dette er en acceptabel faldgrube, da kernen i tilgængeligheden (ingen ufrivillig bevægelse) stadig opretholdes.
Understøtter alle iPhones denne funktionalitet?
HTML5 video og JavaScript-funktionaliteten understøttes bredt på moderne iPhones. Funktionaliteten relateret til prefers-reduced-motion afhænger af iOS-versionen, men er generelt tilgængelig på nyere enheder.
Er denne metode bedre end animerede GIF'er?
Absolut. HTML5 video giver langt bedre kontrol over afspilning, lyd og filstørrelse. Den understøtter også tilgængelighedsfunktioner og er generelt mere energieffektiv end animerede GIF'er, som er kendt for deres store filstørrelser og mangel på kontrol.
Konklusion
Ved at implementere denne tilgang til HTML5 video skaber vi en løsning, der er både brugervenlig og tilgængelig. Den giver brugerne kontrol over deres medieoplevelse, respekterer deres præferencer for reduceret bevægelse og fungerer som en robust erstatning for mindre effektive formater som animerede GIF'er. Dette er et vigtigt skridt mod at bygge en mere inkluderende og hensynsfuld web.
Hvis du vil læse andre artikler, der ligner HTML5 Video: Inklusion og Kontrol, kan du besøge kategorien Teknologi.