<astl-video>

A video between paragraphs, with its title: a file (mp4 or webm, with an optional poster and WebVTT captions) in the browser's own player, or a YouTube or Vimeo video behind a Play button that loads nothing from the provider until the student presses it. Nothing is graded or stored. Under a Content Security Policy, files need media-src (and their posters img-src) for their host, and provider videos frame-src https://www.youtube-nocookie.com https://player.vimeo.com.

Generated from packages/components/src/video/: the manifest, the message catalogs, the editor descriptor and the fixtures.

Property	Value
Tag	<astl-video>
Display	block: stands between paragraphs
Graded	no: nothing to answer
Slot kinds	none (what they mean)
Element version (v)	1
Message namespace	astl.video
Editor label	Video

Live example

The fixture video-file, played with the English UI and graded in the browser. Try it, then press "Check".

Rolling down a ramp

Watch the ball, then say what happens to its speed.

Did the ball go faster or slower near the bottom?

<astl-doc lang="en">
  <h2>Rolling down a ramp</h2>
  <p>Watch the ball, then say what happens to its speed.</p>
  <astl-video id="ramp" label="A ball rolls down a ramp" src="https://assets.astrolabe.test/video/fixtures/video-file/ramp.webm" poster="https://assets.astrolabe.test/video/fixtures/video-file/ramp.svg" captions="https://assets.astrolabe.test/video/fixtures/video-file/ramp.en.vtt"></astl-video>
  <p>Did the ball go faster or slower near the bottom?</p>
</astl-doc>

Attributes

Visibility: public attributes stay in the view, private ones exist only in the answer key (students never get them), derived ones are written by the compiler.

Attribute	Meaning
id public, required id	Source id, unique in the document. Views carry an opaque id instead. Common to all components.
v public integer: >= 1	Element format version. Optional in sources (absent = 1); the compiler always writes the current one. Common to all components.
style-template public string	A look by name, from the style templates the host registers (the component scope); it wins over the document's. More: Looks. Common to all components.
label public, required string	The title, shown above the video: it also names the player and the Play button. Inspector: "Title".
src public url	A video file, mp4 or webm, in the browser's player. Before Play only its metadata loads (its length). Inspector: "Video file (mp4 or webm)".
poster public url	A picture the file's player shows before it plays. Inspector: "Poster (optional)".
captions public url	WebVTT captions of the file, shown by default. Their player then loads the file and the captions with CORS (crossorigin): from another origin, both need Access-Control-Allow-Origin. Inspector: "Captions (WebVTT file)".
captions-lang public string default en	The language of the captions, a BCP 47 tag. Inspector: "Language of the captions".
youtube public string	A YouTube video: its link (watch, share, shorts, embed or live) or its id. The view keeps only the id; it plays from www.youtube-nocookie.com once the student presses Play. Inspector: "YouTube link".
vimeo public string	A Vimeo video: its link or its id. The view keeps only the id; it plays from player.vimeo.com with do-not-track once the student presses Play. Inspector: "Vimeo link".

Children

No child elements.

Variants

One presentation: this component has no variants.

Scoring

Not graded: no slots and no scoring.

Issue codes

Reported in the namespace astl.video, on top of the document issues. Errors block compiling; warnings do not.

Code	Messages
VIDEO_LABEL_MISSING error params id	English: Video {id} has no title. Give it one: it names the video for students who use a screen reader. Polish: Film {id} nie ma tytułu. Nadaj mu tytuł: nazywa on film dla uczniów, którzy korzystają z czytnika ekranu.
VIDEO_SOURCE_MISSING error params id	English: Video {id} has no video. Paste a YouTube or Vimeo link, or give the address of an mp4 or webm file. Polish: Film {id} nie ma nagrania. Wklej link do filmu z YouTube lub Vimeo albo podaj adres pliku mp4 lub webm.
VIDEO_SOURCE_BOTH error params first, id, second	English: Video {id}: {first, select, src {the file} poster {the poster} captions {the captions} youtube {the YouTube video} other {the Vimeo video}} and {second, select, src {the file} poster {the poster} captions {the captions} youtube {the YouTube video} other {the Vimeo video}} cannot go together. A video is a file (with its poster and captions) or one YouTube or Vimeo video. Polish: Film {id}: {first, select, src {plik} poster {obraz zastępczy} captions {napisy} youtube {film z YouTube} other {film z Vimeo}} i {second, select, src {plik} poster {obraz zastępczy} captions {napisy} youtube {film z YouTube} other {film z Vimeo}} nie mogą być razem. Film to plik (z obrazem zastępczym i napisami) albo jeden film z YouTube lub Vimeo.
VIDEO_FILE_TYPE error params id, url	English: Video {id}: {url} is not an mp4 or webm file. For a YouTube or Vimeo video, paste its link as a YouTube or Vimeo video instead. Polish: Film {id}: {url} nie jest plikiem mp4 ani webm. Film z YouTube lub Vimeo wklej jako link do YouTube lub Vimeo.
VIDEO_LINK_INVALID error params id, provider, value	English: Video {id}: “{value}” is neither a {provider, select, vimeo {Vimeo} other {YouTube}} link nor a video id. Paste the link of a video on {provider, select, vimeo {Vimeo} other {YouTube}}. Polish: Film {id}: „{value}” nie jest linkiem do {provider, select, vimeo {Vimeo} other {YouTube}} ani identyfikatorem filmu. Wklej link do filmu z {provider, select, vimeo {Vimeo} other {YouTube}}.
VIDEO_CAPTIONS_LANG_INVALID error params id, value	English: Video {id}: “{value}” is not a language tag. Write the language of the captions as a BCP 47 tag, such as en or pl. Polish: Film {id}: „{value}” nie jest kodem języka. Podaj język napisów jako kod BCP 47, na przykład pl lub en.
VIDEO_CAPTIONS_MISSING warning params id	English: Video {id} has no captions. Add a WebVTT file, so that students who cannot hear the video can follow it. Polish: Film {id} nie ma napisów. Dodaj plik WebVTT, aby uczniowie, którzy nie słyszą filmu, mogli go śledzić.

Starters

The insert menu lists <astl-video> under "Components", where it inserts the default template, and its named starters under "Exercises": whole exercises with sample text in the author's language.

Entry	English	Polish
Components	Video A video file, or a YouTube or Vimeo video that loads only when the student presses Play.	Film Plik wideo albo film z YouTube lub Vimeo, który wczytuje się dopiero, gdy uczeń naciśnie Odtwórz.
Exercises: watch-then-answer	Watch, then answer A video with a tip, then a sentence with a gap	Obejrzyj i odpowiedz Film ze wskazówką, a potem zdanie z luką

Templates of astl-video

As the descriptor writes them: {{id}} becomes a fresh id, {{t:key}} a message in the author's locale.

Default template:

<astl-video id="{{id}}" label="{{t:template.label}}"></astl-video>

Named starter watch-then-answer:

<h3>{{t:template.watch.title}}</h3><p>{{t:template.watch.instruction}}</p><astl-callout kind="tip"><p>{{t:template.watch.tip}}</p></astl-callout><astl-video id="{{id}}" label="{{t:template.watch.label}}" youtube="https://youtu.be/Bq7mT2kWx4E"></astl-video><p>{{t:template.watch.sentence}} <astl-gap answer="{{t:template.watch.gap}}"></astl-gap>.</p>

Accessibility

• Pattern: a file: the browser's video player, labelled by the title, captions on by default; YouTube or Vimeo: a button named by the title and described as loading the provider's player, which it replaces with a titled frame that takes the focus.
• Keys: Tab, Enter, Space.

What every element must keep: Accessibility.

Looks

CSS parts: video, title, player, play. How to reach them: Looks.

Authors pick a look for one element with style-template; it wins over the document's. Built-in templates for <astl-video>: playful, notebook.

Editor

Property	Value
Label	Video (editor.label)
Description	A video file, or a YouTube or Vimeo video that loads only when the student presses Play. (editor.description)
Icon	film-strip
Id prefix	video: new elements get video-1, video-2, ...

Inspector fields, in order:

Field	Edits	Label	Help
attribute	attribute label	Title	Shown above the video. It also names the player for screen readers.
attribute	attribute youtube	YouTube link	Paste the link of a YouTube video, or its id; students get the id only. It plays from youtube-nocookie.com once the student presses Play.
attribute	attribute vimeo	Vimeo link	Paste the link of a Vimeo video, or its id; students get the id only. It plays without tracking once the student presses Play.
attribute	attribute src	Video file (mp4 or webm)	A video is a file or a YouTube or Vimeo link, never both.
attribute	attribute poster	Poster (optional)	A picture shown before the file plays.
attribute	attribute captions	Captions (WebVTT file)	Shown by default, for students who cannot hear the video.
attribute	attribute captions-lang	Language of the captions	A language tag such as en or pl. Empty means English.

All messages

Every key of astl.video: ui.* for students (messages/ui/<locale>.json, the only strings the element loads), issue codes, editor.* and template.* for authors (messages/<locale>.json).

34 keys in English and Polish

Key	Messages
ui.play	English: Play Polish: Odtwórz
ui.loads	English: {provider, select, vimeo {Loads the Vimeo player} other {Loads the YouTube player}} Polish: {provider, select, vimeo {Wczytuje odtwarzacz Vimeo} other {Wczytuje odtwarzacz YouTube}}
VIDEO_LABEL_MISSING	English: Video {id} has no title. Give it one: it names the video for students who use a screen reader. Polish: Film {id} nie ma tytułu. Nadaj mu tytuł: nazywa on film dla uczniów, którzy korzystają z czytnika ekranu.
VIDEO_SOURCE_MISSING	English: Video {id} has no video. Paste a YouTube or Vimeo link, or give the address of an mp4 or webm file. Polish: Film {id} nie ma nagrania. Wklej link do filmu z YouTube lub Vimeo albo podaj adres pliku mp4 lub webm.
VIDEO_SOURCE_BOTH	English: Video {id}: {first, select, src {the file} poster {the poster} captions {the captions} youtube {the YouTube video} other {the Vimeo video}} and {second, select, src {the file} poster {the poster} captions {the captions} youtube {the YouTube video} other {the Vimeo video}} cannot go together. A video is a file (with its poster and captions) or one YouTube or Vimeo video. Polish: Film {id}: {first, select, src {plik} poster {obraz zastępczy} captions {napisy} youtube {film z YouTube} other {film z Vimeo}} i {second, select, src {plik} poster {obraz zastępczy} captions {napisy} youtube {film z YouTube} other {film z Vimeo}} nie mogą być razem. Film to plik (z obrazem zastępczym i napisami) albo jeden film z YouTube lub Vimeo.
VIDEO_FILE_TYPE	English: Video {id}: {url} is not an mp4 or webm file. For a YouTube or Vimeo video, paste its link as a YouTube or Vimeo video instead. Polish: Film {id}: {url} nie jest plikiem mp4 ani webm. Film z YouTube lub Vimeo wklej jako link do YouTube lub Vimeo.
VIDEO_LINK_INVALID	English: Video {id}: “{value}” is neither a {provider, select, vimeo {Vimeo} other {YouTube}} link nor a video id. Paste the link of a video on {provider, select, vimeo {Vimeo} other {YouTube}}. Polish: Film {id}: „{value}” nie jest linkiem do {provider, select, vimeo {Vimeo} other {YouTube}} ani identyfikatorem filmu. Wklej link do filmu z {provider, select, vimeo {Vimeo} other {YouTube}}.
VIDEO_CAPTIONS_LANG_INVALID	English: Video {id}: “{value}” is not a language tag. Write the language of the captions as a BCP 47 tag, such as en or pl. Polish: Film {id}: „{value}” nie jest kodem języka. Podaj język napisów jako kod BCP 47, na przykład pl lub en.
VIDEO_CAPTIONS_MISSING	English: Video {id} has no captions. Add a WebVTT file, so that students who cannot hear the video can follow it. Polish: Film {id} nie ma napisów. Dodaj plik WebVTT, aby uczniowie, którzy nie słyszą filmu, mogli go śledzić.
editor.label	English: Video Polish: Film
editor.description	English: A video file, or a YouTube or Vimeo video that loads only when the student presses Play. Polish: Plik wideo albo film z YouTube lub Vimeo, który wczytuje się dopiero, gdy uczeń naciśnie Odtwórz.
editor.title	English: Title Polish: Tytuł
editor.titleHelp	English: Shown above the video. It also names the player for screen readers. Polish: Widoczny nad filmem. Nazywa też odtwarzacz dla czytników ekranu.
editor.youtube	English: YouTube link Polish: Link do YouTube
editor.youtubeHelp	English: Paste the link of a YouTube video, or its id; students get the id only. It plays from youtube-nocookie.com once the student presses Play. Polish: Wklej link do filmu z YouTube albo jego identyfikator; uczniowie dostają tylko identyfikator. Film odtwarza się z youtube-nocookie.com, gdy uczeń naciśnie Odtwórz.
editor.vimeo	English: Vimeo link Polish: Link do Vimeo
editor.vimeoHelp	English: Paste the link of a Vimeo video, or its id; students get the id only. It plays without tracking once the student presses Play. Polish: Wklej link do filmu z Vimeo albo jego identyfikator; uczniowie dostają tylko identyfikator. Film odtwarza się bez śledzenia, gdy uczeń naciśnie Odtwórz.
editor.src	English: Video file (mp4 or webm) Polish: Plik wideo (mp4 lub webm)
editor.srcHelp	English: A video is a file or a YouTube or Vimeo link, never both. Polish: Film to plik albo link do YouTube lub Vimeo, nigdy jedno i drugie.
editor.poster	English: Poster (optional) Polish: Obraz zastępczy (opcjonalnie)
editor.posterHelp	English: A picture shown before the file plays. Polish: Obrazek widoczny, zanim plik zacznie się odtwarzać.
editor.captions	English: Captions (WebVTT file) Polish: Napisy (plik WebVTT)
editor.captionsHelp	English: Shown by default, for students who cannot hear the video. Polish: Widoczne domyślnie, dla uczniów, którzy nie słyszą filmu.
editor.captionsLang	English: Language of the captions Polish: Język napisów
editor.captionsLangHelp	English: A language tag such as en or pl. Empty means English. Polish: Kod języka, na przykład pl lub en. Puste pole oznacza angielski.
template.label	English: Title of the video Polish: Tytuł filmu
editor.template.watch	English: Watch, then answer Polish: Obejrzyj i odpowiedz
editor.template.watch.description	English: A video with a tip, then a sentence with a gap Polish: Film ze wskazówką, a potem zdanie z luką
template.watch.title	English: Honey bees Polish: Pszczoły miodne
template.watch.instruction	English: Watch the video, then complete the sentence below it. Polish: Obejrzyj film, a potem uzupełnij zdanie pod nim.
template.watch.tip	English: You can watch the video as many times as you like. Polish: Możesz obejrzeć film tyle razy, ile chcesz.
template.watch.label	English: How bees make honey Polish: Jak pszczoły robią miód
template.watch.sentence	English: Bees make honey from the nectar of Polish: Pszczoły robią miód z nektaru
template.watch.gap	English: flowers Polish: kwiatów