動画プレイヤーVideo player

「動画プレイヤー（Video player）」を実装してください。

## これは何か
動画を再生し、再生・停止・音量・シークを操作できる部品。

## 使いどころ
- 手順の説明など、動きで見せたほうが速いとき
- 音声つきの内容を届けるとき

## 実装の要件
- video 要素 + controls + track（字幕）
- poster 属性で読み込み前の絵を出す
- 自動再生で音を出さない。多くのブラウザが止めるうえ、嫌われる
- 字幕を用意しないと、音を出せない場面で内容が伝わらない
- 再生ボタンだけを大きくして、他の操作を隠さない。音量とシークは必須

## アクセシビリティの要件
- controls 属性を付けて、ブラウザ標準の操作を使うのがいちばん確実
- 字幕（track 要素）を付ける。音声が聞けない人・聞かない人に届く
- 自動再生するなら muted にし、止めるボタンを添える
- 独自の操作を作るなら、キーボード（Space で再生／停止）に対応する

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<figure class="x-video-player">
  <div class="x-video-player__screen" aria-hidden="true">
    <span class="x-video-player__play"><i class="fa-solid fa-play"></i></span>
  </div>
  <figcaption class="x-video-player__c">使い方の紹介（2分18秒・字幕あり）</figcaption>
</figure>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-video-player,
.x-video-player *:not([class*="fa-"]),
.x-video-player *:not([class*="fa-"])::before,
.x-video-player *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-video-player {
  width: 198px;
  margin: 0;
}
.x-video-player__screen {
  display: grid;
  place-items: center;
  height: 111px;
  border-radius: 8px;
  background: #1b2028;
}
.x-video-player__play {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  color: #1b2028;
  font-size: 13px;
}
.x-video-player__c {
  margin-top: 7px;
  font-size: 11px;
  color: #606a7b;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。