video-elementet och bildförhållande
Bädda in video och bevara korrekta bildförhållanden
video-elementet och bildförhållande är en gratis lektion i HTML Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för HTML Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i HTML Academy innehåller totalt 4 lektioner.
Videoelementet
Elementet <video> bäddar in video på ett inbyggt sätt:
<video controls width="800" height="450" src="tutorial.mp4">
Your browser does not support video.
</video>Viktiga attribut
Viktiga videoattribut:
<video
src="demo.mp4"
controls <!-- show player UI -->
width="1280" <!-- intrinsic width -->
height="720" <!-- intrinsic height -->
poster="preview.jpg" <!-- thumbnail before play -->
preload="metadata" <!-- preload only metadata -->
>
Your browser does not support video.
</video>Attributet poster
Attributet poster anger en miniatyrbild som visas innan videon spelas upp:
<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
<source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
or the first frame of the video (browser-dependent) -->Bredd och höjd för bildförhållandet
Ange alltid bredd och höjd för att förhindra att layouten hoppar:
<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
video { width: 100%; height: auto; }
-->Responsiv video med CSS
Gör videon responsiv med CSS:
video {
width: 100%;
height: auto;
max-width: 1280px;
display: block;
margin: 0 auto;
}
/* Aspect ratio box: */
.video-wrapper {
position: relative;
padding-top: 56.25%; /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}CSS-egenskapen aspect-ratio
En modern metod med CSS-egenskapen aspect-ratio:
video {
width: 100%;
aspect-ratio: 16 / 9;
height: auto;
}
/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */Videouppspelningskontroller med JS
Styr video med JavaScript:
const video = document.getElementById('my-video');
video.play();
video.pause();
video.currentTime = 60; // jump to 1 minute
video.playbackRate = 1.5; // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();
console.log(video.duration); // total length
console.log(video.paused); // is it paused?Videohändelser
Lyssna på videohändelser:
video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
console.log('Duration:', video.duration);
console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});API för helskärm
Gå in i och avsluta helskärm programmatiskt:
const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');
btn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen();
} else {
document.exitFullscreen();
}
});
document.addEventListener('fullscreenchange', () => {
btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});Webbläsarnas policy för automatisk video-uppspelning
Webbläsarnas regler för automatisk uppspelning av video:
- Video utan ljud → kan spelas upp automatiskt i alla moderna webbläsare
- Video med ljud → blockeras om inte användaren har interagerat med sidan
- Googles Media Engagement Index → återkommande besökare kan tillåtas spela upp video automatiskt
- Erbjud alltid en uppspelningsknapp som reservlösning
Tillgänglighet för video
Tillgänglighetskrav för video:
- Erbjud textning för all dialog och alla viktiga ljud
- Erbjud ett transkript för döva och hörselskadade användare
- Erbjud syntolkning för blinda användare (beskriv information som endast visas visuellt)
- Se till att tangentbordskontroller fungerar (det gör de inbyggda kontrollerna)
Snabbtest
Vilket videoattribut visar en stillbild innan videon spelas upp?
Sammanfattning: videoelementet
Grunderna i videoelementet:
controls— visar spelarens gränssnittwidthochheight— förhindrar att layouten hopparposter— miniatyrbild före uppspelningpreload="metadata"— ett bra standardval för prestanda- Responsivt:
width: 100%; height: auto;elleraspect-ratio: 16/9 - Video utan ljud kan spelas upp automatiskt; video med ljud kan inte göra det i de flesta webbläsare
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”video-elementet och bildförhållande” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen HTML Academy, inklusive ”video-elementet och bildförhållande”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i HTML Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”video-elementet och bildförhållande”?
Bädda in video och bevara korrekta bildförhållanden Ni övar på HTML Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig HTML Academy?
Du behöver inga förkunskaper. Utbildningen i HTML Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”video-elementet och bildförhållande”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här HTML Academy-lektionen?
Ja. Varje HTML Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- audio-elementet src controls loop autoplay
- video-elementet och bildförhållande
- source-elementet för flera format
- Undertexter med track och WebVTT