a11y: the `video` shortcode cannot add captions to a local video file
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 54/100
- Issue 类型
- 功能
- 描述清晰度
- 描述清楚
- 活跃度
- 活跃
- 技术栈
- html, javascript
调研方向
Read the video shortcode handler at src/resources/extensions/quarto/video/video.lua, especially the metadata handling around line 314, and trace how local media files are copied to website output. Render the supplied captions example and check that the output includes a WebVTT track and that the track file is copied to _site/; apply the same check to the proposed descriptions track.
由索引模型根据 Issue 内容生成。
描述
I have:
- searched the issue tracker for similar issues
- installed the latest version of Quarto CLI
- formatted my issue following the Bug Reports guide
Bug description
For a local video file, the video shortcode emits a Video.js player with one <source> and no <track>. The shortcode has no argument for a caption track or a description track. As a result, an author who uses the shortcode cannot give a local video captions or an audio description.
Hosted videos (YouTube, Vimeo, Brightcove) do not have this problem. Their players show the captions that the host gives.
This gap fails these criteria for local videos:
- WCAG 1.2.2 Captions (Prerecorded)
- WCAG 1.2.3 Audio Description or Media Alternative (Prerecorded)
- WCAG 1.2.5 Audio Description (Prerecorded)
An author workaround is to add raw HTML <video> element with <track> children. This workaround has two problems: no Video.js player (unless the page uses a video shortcode elsewhere); the author needs to list the .vtt files in resources to ensure they end up in _site/.
Proposal
Add a captions argument that takes a WebVTT file, with two optional arguments for the language and the menu label:
{{< video demo.mp4 title="Demo" captions="demo.vtt" captions-lang="en" captions-label="English" >}}
The shortcode then adds a track to the player:
<video ...>
<source src="demo.mp4">
<track kind="captions" src="demo.vtt" srclang="en" label="English">
</video>
A descriptions argument, with descriptions-lang and descriptions-label, adds a kind="descriptions" track in the same way.
For the defaults:
- If
captions-langis not given, the shortcode can use the documentlang. The shortcode handler already receives the document metadata (video.lua#L314). - If
captions-labelis not given, the Video.js captions menu shows the language code, for example "en Captions". If the track has no language either, the menu shows "Unknown Captions". A label is better, so the documentation can recommend one.
These arguments give one track of each kind, which is sufficient for accessibility. Tracks in more than one language need a different syntax, and can come later.
The Video.js that Quarto ships (7.20.2) already supports <track> children. It reads them when the player starts, so the shortcode needs no extra JavaScript (Video.js text tracks guide). The track file must be WebVTT.
The shortcode must also make sure that the track files go to the output directory. In a website project, the render copies demo.mp4 to _site/, but it does not copy demo.vtt.
AI tools helped with this investigation. All findings come from a local clone of quarto-cli, and I rendered the example to confirm them.
Steps to reproduce
Put any demo.mp4 and this demo.vtt next to the document:
WEBVTT
00:00.000 --> 00:02.000
Hello
Then render this document:
---
title: Video captions
---
{{< video demo.mp4 title="Demo" captions="demo.vtt" >}}
Actual behavior
The output has no <track> element.
Expected behavior
The output has a <track> element. The player can show the captions.
Your environment
- IDE: Positron 2026.11.0 (build 76). I rendered from the terminal.
- OS: macOS 27.0.1 (build 26A434)
Quarto check output
Quarto 1.11.6
[✓] Checking environment information...
Quarto cache location: /Users/charlottewickham/Library/Caches/quarto
Project: none found (single-file mode)
[✓] Checking versions of quarto binary dependencies...
Pandoc version 3.10.0: OK
Dart Sass version 1.101.0: OK
Deno version 2.7.14: OK
Typst version 0.15.1: OK
[✓] Checking versions of quarto dependencies......OK
[✓] Checking Quarto installation......OK
Version: 1.11.6
Path: /Applications/quarto/bin
[✓] Checking tools....................OK
TinyTeX: v2026.04
Chrome Headless Shell: 150.0.7871.115
VeraPDF: 1.28.2
[✓] Checking LaTeX....................OK
Using: TinyTex
Path: /Users/charlottewickham/Library/TinyTeX/bin/universal-darwin
Version: 2026
[✓] Checking Chrome Headless....................OK
Using: Chrome Headless Shell installed by Quarto
Path: /Users/charlottewickham/Library/Application Support/quarto/chrome-headless-shell/chrome-headless-shell-mac-arm64/chrome-headless-shell
Version: 150.0.7871.115
[✓] Checking basic markdown render....OK
[✓] Checking R installation...........OK
Version: 4.6.0
Path: /Library/Frameworks/R.framework/Versions/4.6/Resources
LibPaths:
- /Users/charlottewickham/Library/R/arm64/4.6/library
- /Library/Frameworks/R.framework/Versions/4.6/Resources/library
knitr: 1.51
rmarkdown: 2.31
[✓] Checking Knitr engine render......OK
[✓] Checking Python 3 installation....OK
Version: 3.12.2
Path: /Users/charlottewickham/.pyenv/versions/3.12.2/bin/python
Jupyter: 5.9.1
Kernels: python3
[✓] Checking Jupyter engine render....OK
[✓] Checking Julia installation...
- 主要语言
- JavaScript
- 星标
- 6.1k
- 派生
- 476
- 平均合并
- 17 小时 7 分钟
- 30 天内合并 PR
- 112
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
quarto-dev/quarto-cli 的其他 Issue
-
enhancement websites
难度 2/5 1-3 小时 新手友好度 78/100
quarto-dev/quarto-cli#15255 · 1 条评论 ·
维护者通常 1 天内回复
-
Website announcement dismiss control cannot be reached or used with a keyboard可能已有人在做 @Xander-AJ 今天认领。 未关闭accessibility bug websites
难度 1/5 1-3 小时 新手友好度 88/100
quarto-dev/quarto-cli#15235 ·
维护者通常 1 天内回复
-
quarto.json.decode does not raise on invalid JSON, so pcall cannot catch it可能已有人在做 @sogav21 于 2 天前认领。 未关闭bug lua
难度 2/5 1-3 小时 新手友好度 84/100
quarto-dev/quarto-cli#15226 ·
维护者通常 1 天内回复
-
arrow-dark gives region markers a light band that fails contrast可能已有人在做 @vav7 于 1 天前认领。 未关闭accessibility bug themes
难度 1/5 1 小时以内 新手友好度 88/100
quarto-dev/quarto-cli#15222 ·
维护者通常 1 天内回复
-
bug code-annotation
难度 2/5 1-3 小时 新手友好度 76/100
quarto-dev/quarto-cli#15215 ·
维护者通常 1 天内回复
查看 quarto-dev/quarto-cli 的全部 Issue
相似的 Issue
-
good first issue
难度 2/5 3-5 天 新手友好度 62/100
paipai1999/POS-system#3 ·
-
good first issue
难度 2/5 1-3 小时 新手友好度 85/100
r-afael/better-yt-recommendations#36 ·
维护者通常 1 天内回复
-
needs-triage
难度 2/5 1-3 小时 新手友好度 66/100
microsoft/playwright#43875 · 1 条评论 ·
维护者通常 1 天内回复
-
cli good first issue
难度 2/5 1-3 小时 新手友好度 85/100
维护者通常 1 天内回复
-
Run the dependency drift check可能已有人在做 @spaceninja 今天认领。 未关闭
难度 1/5 1 小时以内 新手友好度 82/100
cloudfour/stylelint-config-cloudfour#683 ·
维护者通常 1 天内回复