Inline-video: Regler och exempel

En inline-video är en värdbaserad eller externt inbäddad inspelning som placeras i artikelns läsflöde för att demonstrera, förklara eller dokumentera en avgränsad idé. Den innehåller en synlig etikett, en genomtänkt miniatyrbild, uppspelningskontroller, undertexter, längd och en fullständig avskrift. Utan dessa omgivande ord är en omärkt spelare osynlig för varje läsare som inte kan eller väljer att inte titta – och nästan tom för system som extraherar text snarare än avkodar inspelningen.

Kommentaren om den väntande miniatyrbilden är en specifikation för bildfångst, inte en resursreferens. Den omgivande HTML-koden demonstrerar den nödvändiga läsordningen innan mediaproduktionen är klar.

Varför detta element är viktigt

Video minskar förklaringskostnaden när rörelse, tajming, röst eller förändring över tid bär mening. En läsare kan se hur en meny öppnas, hur en fysisk produkt rör sig eller hur en talare kvalificerar en slutsats. Att titta kräver uppmärksamhet, ljud eller undertexter, tid och ofta mer data än att läsa, så en tydlig etikett och längd låter läsaren bedöma den kostnaden.

Miniatyrbilder påverkar det beslutet före uppspelning. En representativ bildruta fungerar som ett visuellt löfte om vad inspelningen innehåller. En slumpmässig bildruta med slutna ögon, en laddningssnurra eller en orelaterad titelbild får innehållet att se slarvigt ut och tvingar läsaren att trycka på play för att upptäcka ämnet. Miniatyrbilden bör visa det tillstånd, person, objekt eller resultat som videon faktiskt förklarar.

Maskinextraherbarhet är programvarans förmåga att återvinna ett innehålls elements mening utan att återge dess presentation. En bar iframe exponerar vanligtvis lite mer än en leverantörs-URL. Ett märkt element exponerar en titel, sammanfattning, längd, datum, miniatyrbild, undertexter, avskrift och stabil identifierare. Sök-, översättnings-, tillgänglighets- och återvinningssystem kan då förstå den avgränsade förklaringen.

Avskriften är därför en del av elementet, inte en valfri nedladdning. Den bevarar talade påståenden, talarbyten, meningsfulla ljud och visuella handlingar i dokumentets ordning. Undertexter stödjer uppspelningsupplevelsen; avskriften stödjer sidan. Följ de gemensamma skrivreglerna för element för semantisk företräde, direktivsyntax och kroppsmappning. Denna sida har företräde där den kräver en avskrift, miniatyrbild, längd och videospecifika tillgänglighetsfält.

När du ska använda det

Använd inline-video när tidsbaserade bevis gör en avgränsad poäng tydligare än stillbilder och prosa. Lämpliga fall inkluderar en gränssnittsoperation, fysisk teknik, synlig övergång, expertförklaring, rörelseberoende produktbeteende eller ett inspelat resultat vars leverans är bevis.

Tillämpa ett ersättningstest innan du beställer inspelningen. Om en skärmdump och två meningar förklarar poängen lika bra, använd dem: de laddas snabbare, skannas snabbare och kostar mindre att uppdatera. Video förtjänar sin plats när sekvens, tempo, rörelse, röst eller observerat beteende förändrar förståelsen.

Nära överträffade fall inkluderar:

• Ett långt webbinarium i ett orelaterat stycke: länka till en dedikerad videosida eller använd en hel videosektion. Ett inline-element måste tjäna det lokala argumentet, inte importera en timmes angränsande ämne.
• En tyst loopande dekoration: det är rörelsedesign, inte redaktionell video. Ta bort den eller behandla den som dekorativ media med reducerad rörelse.
• En skärminspelning som används istället för instruktioner: skriv stegen och framgångstillståndet i text. Videon kan demonstrera dem, men den kan inte vara det enda sättet att slutföra uppgiften.
• Ett kundcitat klippt utan sammanhang: ett kort klipp kan stödja en fallstudie endast när talaren, relationen, inspelningsdatumet, godkännandet och omgivande påstående redovisas.
• En video vars enda värde är personlighet: använd den endast när röst, leverans eller talarens auktoritet är relevant. Tvinga inte läsare att titta på en presentatör som läser upp text som redan finns på sidan.
• Flera liknande klipp: använd ett galleri eller en dedikerad mediesektion när urval bland inspelningar är uppgiften. Stapla inte inline-spelare.

Var du ska placera den

Placera videon omedelbart efter stycket som namnger vad läsaren kommer att lära sig eller observera. Sätt dess titel, längd och sammanfattning före spelaren. Placera avskriften direkt efter den, endast hopfälld när hela texten finns kvar i HTML utan uppspelningskod.

I en procedur, placera spelaren efter den skrivna handlingssekvensen och före felsökning. Läsaren bör kunna agera utan att titta, sedan använda inspelningen för att bekräfta rörelse eller gränssnittstillstånd. I ett argument eller en fallstudie, ange påståendet före inspelningen och tolka dess begränsningar efter den.

Placera den inte bredvid en annan spelare, auto-spelande animation, stor uppmaning till handling, formulär eller miniräknare. Konkurrerande kontroller skapar otydligt fokus. Placera den inte inuti en tabellcell, listobjekt, utrop, flik, karusell, accordion-panel eller klickbart kort. Avskriften kan använda en öppen/stängd kontroll; hela videon får inte det.

Håll titel, sammanfattning, miniatyrbild, spelare, längd, avskriftskontroll och kredit inom en figur-gräns. En källnotering kan omedelbart följa. Separera aldrig spelaren från sin avskrift med en annons, kampanj eller orelaterat avsnitt.

Anatomi

1. Synlig titel: Namnger uppgiften, demonstrationen, händelsen eller påståendet i specifik HTML-text.
2. Sammanfattning: Förklarar i en mening vad läsaren kommer att se och varför det är viktigt.
3. Längd: Anger tidskostnaden före uppspelning i minuter och sekunder.
4. Miniatyrbild: Visar en representativ, godkänd bildruta utan att låtsas vara en knapp i sig själv.
5. Spelarkontroller: Tillhandahåller play, paus, sök, volym, helskärm, uppspelningshastighet och undertextåtkomst.
6. Undertexter: Synkroniserar dialog, talarbyten och meningsfullt icke-talljud med uppspelning.
7. Avskrift: Återger den fullständiga meningsfulla sekvensen som valbar, sökbar HTML-text.
8. Visuella beskrivningar: Registrerar meningsfulla åtgärder eller förändringar på skärmen som berättarrösten inte anger.
9. Kredit och källa: Identifierar talaren, skaparen, inspelningsdatumet eller bevisets ursprung när det är relevant.

Titeln är inte filnamnet och sammanfattningen är inte “Se videon nedan.” Var och en måste förbli användbar när den kopieras utan spelaren.

Designexempel

Alla varianter delar samma innehållskontrakt. Leveransen förändras; märkning, undertexter, avskriftskvalitet, uppspelningssamtycke och läsordning gör det inte.

Värdbaserad demonstration

Använd en första-parts HTML5-spelare för en kort produkt- eller processinspelning när organisationen kontrollerar kodning, undertexter, miniatyrval och tillgänglighet.

Integritetsmedveten extern inbäddning

Använd en extern plattform när dess leverans, analys eller etablerade kanal krävs. Ladda leverantören endast efter samtycke där policy kräver det, identifiera leverantören före aktivering och bevara den lokala avskriften även om leverantören tar bort inspelningen.

Kort gränssnittsklipp

Använd ett kort klipp för en tillståndsändring som är svår att kommunicera med stillbilder. Det behöver fortfarande kontroller, en pausmekanism, en meningsfull textbeskrivning och en avskrift; gör det inte till en automatiskt loopande GIF.

Intervju- eller bevisklipp

Använd ett talarlett klipp när författarskap, formulering eller observerat vittnesmål spelar roll. Visa personens namn och roll i HTML, redovisa redigeringar och transkribera både tal och materiella visuella bevis.

Parametrar

Dessa fält utgör det bärbara innehållskontraktet. Bredd, kant, skugga, play-knappens stil och brytpunktsbeteende tillhör renderaren.

Den första brödtextrubriken mappas till title; det första stycket mappas till summary; resten av brödtexten mappas till transcript. Tidsintervall i avskriften är valfria för en kontinuerlig enkel-talar-förklaring och rekommenderas för procedurer, talarbyten och inspelningar längre än två minuter. Fälten autoplay, loop och bakgrundsljud är avsiktligt frånvarande.

Syntax och kodexempel

Varje notation bevarar samma titel, sammanfattning, mediadata, undertexter och avskrift. Exempeldomänerna beskriver kontraktet och är inte produktionsresursreferenser.

Bärbart Markdown-direktiv

:::inline-video{src="https://media.example.com/freshness-filter.mp4" provider=hosted poster="https://media.example.com/freshness-filter-poster.webp" duration="PT1M30S" captions="https://media.example.com/freshness-filter.en.vtt" language=en uploadDate="2026-08-27"}

## Filter pages that need review

See how to apply the Needs review filter and verify the resulting work queue.

**00:00–00:18 — Open the report.** From Audit, open Freshness.

**00:19–00:54 — Apply the filter.** Open Status and choose Needs review.

**00:55–01:30 — Verify the queue.** Confirm that every visible row has the expected status.
:::

Hugo-shortcode

{{< inline-video src="https://media.example.com/freshness-filter.mp4" provider="hosted" poster="https://media.example.com/freshness-filter-poster.webp" duration="PT1M30S" captions="https://media.example.com/freshness-filter.en.vtt" language="en" uploadDate="2026-08-27" >}}
## Filter pages that need review

See how to apply the Needs review filter and verify the resulting work queue.

**00:00–00:18 — Open the report.** From Audit, open Freshness.

**00:19–00:54 — Apply the filter.** Open Status and choose Needs review.

**00:55–01:30 — Verify the queue.** Confirm that every visible row has the expected status.
{{< /inline-video >}}

Detta är det avsedda adapterkontraktet, inte ett påstående att en lokal shortcode finns. Det använder endast namngivna parametrar. Tills en renderare är registrerad, använd semantisk figure-, video-, track- och transcript-HTML som bevarar samma fält.

WordPress-block

<!-- wp:amicited/inline-video {"src":"https://media.example.com/freshness-filter.mp4","provider":"hosted","poster":"https://media.example.com/freshness-filter-poster.webp","duration":"PT1M30S","captions":"https://media.example.com/freshness-filter.en.vtt","language":"en","uploadDate":"2026-08-27"} -->
<h2>Filter pages that need review</h2>
<p>See how to apply the Needs review filter and verify the resulting work queue.</p>
<video controls preload="metadata" poster="https://media.example.com/freshness-filter-poster.webp">
  <source src="https://media.example.com/freshness-filter.mp4" type="video/mp4">
  <track kind="captions" srclang="en" src="https://media.example.com/freshness-filter.en.vtt" label="English" default>
</video>
<details><summary>Read the transcript</summary><p><strong>00:00–00:18 — Open the report.</strong> From Audit, open Freshness.</p><p><strong>00:19–00:54 — Apply the filter.</strong> Open Status and choose Needs review.</p><p><strong>00:55–01:30 — Verify the queue.</strong> Confirm that every visible row has the expected status.</p></details>
<!-- /wp:amicited/inline-video -->

Om det registrerade WordPress-blocket inte är tillgängligt, använd inbyggda Video-, Heading-, Paragraph- och Details-block. Klistra inte in en iframe och utelämna den lokala avskriften.

Exempel

Bra: en avgränsad demonstration med ett läsalternativ

Filtrera sidor som behöver granskas · 1:30

Videon visar en uppgift: att öppna en färskhetsrapport, tillämpa ett statusfilter och kontrollera resultatantalet. Dess miniatyrbild visar det öppna filtret, undertexterna identifierar gränssnittsetiketter exakt och den tredelade avskriften registrerar varje åtgärd och framgångskontroll. Uppspelning börjar först efter aktivering.

Detta fungerar eftersom en läsare kan förutse värdet och tidskostnaden, titta med ljud, titta med undertexter eller slutföra samma uppgift från avskriften. Inspelningen lägger till rörelse och tillståndsändringsbevis utan att bli den enda instruktionen.

Dålig: en omärkt spelare

Titta på detta En tredjeparts iframe laddas automatiskt under rubriken. Dess miniatyrbild är en svart bildruta, ingen längd visas, undertexter är leverantörsgenererade och ogranskade, och sidan innehåller varken avskrift eller sammanfattning.

Den dåliga versionen tvingar varje läsare som inte tittar att gissa. Den ger extraherare inget ämne, ber integritetsmedvetna läsare att kontakta en leverantör innan de väljer uppspelning, erbjuder ingen beständig text när inspelningen försvinner och kan annonsera felaktiga undertexter som fakta. Åtgärda det med en specifik titel och sammanfattning, genomtänkt miniatyrbild, längd, samtyckesmedveten laddning, granskade undertexter, fullständig lokal avskrift och en skriven uppgift eller ett påstående utanför spelaren.

Schemamarkering och tillgänglighet

Inline-video skapar inte automatiskt en schema-rättighet. Använd VideoObject endast när sidan synligt tillhandahåller korrekta värden för name, description, thumbnailUrl, uploadDate, duration och contentUrl eller embedUrl för den tillgängliga inspelningen. Hitta aldrig på fält för att tillfredsställa en validator eller markera ett dekorativt klipp som primär video.

En relevant video kan stödja en berättigad Article, HowTo eller Product när sidan självständigt kvalificerar sig. Dess avskrift kan inte rättfärdiga påståenden eller steg som saknas från den synliga sidan.

Tillgänglighet börjar före uppspelning. Märk figuren, visa titel och längd i text och ge kontrollerna tangentbordsoperation och synligt fokus. Spela aldrig upp automatiskt. Tillhandahåll paus, sök, volym, hastighet, undertexter och helskärm. Fånga inte fokus i en tredjepartsspelare; efter att helskärm stängts, återför fokus till den initierande kontrollen.

Undertexter måste vara synkroniserade, punkterade och granskade mot inspelningen. Identifiera talare när rösten inte är uppenbar och inkludera meningsfulla ljud som “[notifieringston]” när de påverkar förståelsen. Ljudbeskrivning krävs när meningsfull visuell information inte anges i huvudljudet; en beskrivande avskrift ensam gör inte den tidsatta uppspelningsupplevelsen likvärdig.

Avskriften måste vara riktig HTML i logisk ordning – inte canvas, endast uppspelningsinnehåll, dold text eller en PDF-endast nedladdning. Öppna/stäng-kontroller behöver ett tillgängligt namn och expanderat tillstånd. Spelare och avskrift måste fungera vid 200 % zoom och smala bredder utan horisontell scrollning på sidnivå.

Skrivregler

Orden runt spelaren avgör om videon är ett innehållselement eller ett oförklarat objekt:

• Skriv en specifik titel på 4–12 ord. Namnge uppgiften, demonstrationen, talaren, händelsen eller fyndet; använd aldrig “Video,” “Titta på detta,” eller “Lär dig mer” ensamt.
• Skriv en sammanfattningsmening på 15–35 ord som berättar för läsaren vad som händer och varför det är viktigt. Upprepa inte titeln.
• Håll inline-inspelningar fokuserade och normalt under fem minuter. Den hårda maxgränsen är 20 minuter; längre inspelningar hör hemma på en dedikerad sida eller behöver redaktionell segmentering.
• Visa längd före uppspelning. Använd M:SS för synlig text och ISO 8601, såsom PT1M30S, i strukturerade fält.
• Välj en miniatyrbild som representerar ämnet i normal visningsstorlek. Undvik tomma bildrutor, snurror, oavsiktliga uttryck, vilseledande play-knappar, liten gränssnittstext och ogodkänd personlig eller kundinformation.
• Granska undertexter mot den slutliga redigeringen. Korrigera namn, produktetiketter, siffror, domänterminologi, punktsättning, talarbyten och meningsfulla ljud.
• Transkribera allt meningsfullt tal och bilder. Sammanfattningar, kapiteltitlar och auto-genererade undertextfiler ersätter inte avskriften.
• Använd korta avskriftsstycken, talaretiketter vid behov och tidsintervall kring procedurella steg eller ämnesbyten. Tillverka inte citat från omskrivet tal.
• Redovisa redigeringar som kan ändra tolkning. Klipp inte ihop ett vittnesmål, experiment eller demonstration så att sekvensen antyder ett ostött resultat.
• Håll viktiga instruktioner, priser, varningar, behörighetsvillkor, bevis och uppmaningar till handling utanför inspelningen. En läsare ska inte behöva spola i en tidslinje för att hitta ett väsentligt faktum.
• Placera aldrig autouppspelning, blinkande innehåll, bakgrundsljud, konverteringsöverlägg, låsta avskriftsfält eller en andra spelare inuti elementet.
• Registrera mediaägaren och granskningsutlösaren. Kontrollera videon när gränssnittet, policyn, produktbeteendet, talarattributionen eller omgivande påstående ändras.

Inläggstyper som använder det

Arrayen postTypes i front matter styr denna matris. Inkludering tillåter inline-video när tidsbaserade bevis tillför mening; det kräver inte en spelare på varje sida.

QA-checklista

• Videon tillför tidsbaserad mening som en stillbild och kortfattad prosa inte kan kommunicera lika väl.
• Den synliga titeln namnger inspelningen specifikt, och sammanfattningen förklarar dess värde före uppspelning.
• Längd visas innan läsaren aktiverar spelaren.
• Miniatyrbilden är representativ, läsbar, godkänd och fri från privat eller vilseledande innehåll.
• Uppspelning startar aldrig automatiskt, loopar oväntat eller producerar ljud utan en läsaråtgärd.
• Play, paus, sök, volym, hastighet, undertexter och helskärm fungerar med tangentbord och pekning.
• Undertexter matchar den slutliga redigeringen och bevarar korrekt namn, siffror, talarbyten och meningsfulla ljud.
• Meningsfulla bilder som inte förmedlas i tal får ljudbeskrivning eller en likvärdig alternativ version.
• Den fullständiga avskriften är valbar HTML, följer inspelningens ordning och beskriver nödvändiga visuella åtgärder.
• Skrivna instruktioner, varningar, villkor, bevis och uppmaningar till handling finns kvar utanför videon.
• Extern leverantörsladdning följer tillämpliga samtyckesregler, och leverantören identifieras före aktivering.
• Spelaren, etiketten och avskriften förblir en semantisk figur och avbryts inte av orelaterat innehåll.
• Elementet är inte nästlat inuti en tabell, lista, utrop, flik, karusell, accordion-panel eller klickbar behållare.
• Inspelningen och avskriften fungerar vid 200 % zoom, smala bredder, reducerad rörelse och utan JavaScript-endast mening.
• Alla VideoObject-fält matchar synlig, verifierbar mediadata och den tillgängliga inspelningen.
• Den valda inläggstypen finns i postTypes, och placeringen matchar matrisen ovan.
• Mediaägaren, rättigheterna, inspelningsdatumet och villkoren för granskning eller ersättning är registrerade.

FAQ

Behöver varje inline-video en avskrift?

Ja. Undertexter tjänar synkroniserad uppspelning; avskriften tjänar läsning, genomsökning, sökning, översättning, citat, tillgänglighet och extraktion. Den måste innehålla det fullständiga meningsfulla innehållet, inklusive visuella handlingar som tal inte förklarar.

Kan miniatyrbilden innehålla videotiteln?

Ja, men samma identifierande information måste även finnas i HTML-text. Text i miniatyrbilden kan vara oläsbar på en liten skärm, otillgänglig när bilder inte laddas och oåtkomlig för programvara som inte tolkar pixlar.

Ska en inline-video spelas upp automatiskt?

Nej. Automatisk uppspelning förbrukar data, avbryter läsning, introducerar oönskad rörelse eller ljud och tar bort läsarens val om när de ska engagera sig. Starta endast efter en explicit aktivering.

Är undertexter och en avskrift samma sak?

Nej. Undertexter är tidsatta till uppspelning och inkluderar relevanta ljudsignaler. En avskrift är ett beständigt läsalternativ organiserat i inspelningens sekvens och berikat med nödvändiga beskrivningar av meningsfulla bilder.

Kräver en inline-video VideoObject-schema?

Nej. Lägg till VideoObject endast när korrekt synlig metadata och en stabil inspelning stödjer det. En spelare utan ett tillförlitligt namn, beskrivning, miniatyrbild, uppladdningsdatum, längd och media-URL bör inte generera ofullständig eller påhittad markering.