手話通訳がない、または手話が小さすぎて読み取れない動画

−<video controls preload="metadata"−  src="brew-guide.signed.webm" poster="brew-guide.jpg">  <track kind="captions" srclang="ja" label="日本語"    src="brew-guide.ja.vtt"></video>

+<div class="player">+  <video id="brew-video" controls controlslist="nofullscreen" playsinline+    preload="metadata" src="brew-guide.webm" poster="brew-guide.jpg">+    <track kind="captions" srclang="ja" label="日本語"+      src="brew-guide.ja.vtt">+  </video>+  <video id="interpreter" class="interpreter" muted playsinline+    preload="metadata" src="brew-guide.interpreter.webm" hidden></video>+</div>+<button type="button" id="sign" aria-pressed="false">+  手話+</button>+<button type="button" id="full-screen">+  全画面+</button> +<style>+  .player:has(.interpreter:not([hidden])) {+    display: grid;+    grid-template-columns: 2fr 1fr;+    gap: 0.5rem;+  }+  .player video {+    width: 100%;+  }+  .interpreter {+    height: 100%;+    object-fit: cover;+  }+</style> +<script>+  const player = document.querySelector('.player');+  const video = document.getElementById('brew-video');+  const interpreter = document.getElementById('interpreter');+  const button = document.getElementById('sign');  // 通訳者の動画を、再生位置、速度、再生と一時停止まで動画に合わせる。+  function follow() {+    if (interpreter.hidden) return;+    interpreter.playbackRate = video.playbackRate;+    if (Math.abs(interpreter.currentTime - video.currentTime) > 0.3) {+      interpreter.currentTime = video.currentTime;+    }+    if (video.paused) interpreter.pause();+    else interpreter.play();+  }+  for (const type of ['play', 'pause', 'seeked', 'ratechange', 'timeupdate']) {+    video.addEventListener(type, follow);+  }+  button.addEventListener('click', () => {+    const on = button.getAttribute('aria-pressed') !== 'true';+    interpreter.hidden = !on;+    button.setAttribute('aria-pressed', String(on));+    follow();+  });  // 全画面にするときは、通訳者も映像と一緒にする。+  document.getElementById('full-screen').addEventListener('click', () => {+    player.requestFullscreen();+  });+</script>