ts-video-player 0.1.7 → 0.1.9

package/dist/player.d.ts

@@ -67,6 +67,12 @@ export declare class Player implements IPlayer {
     setPoster(url: string): void;
     getSrc(): Src | null;
     private attachProviderEvents;
+    /**
+     * Play what was asked for before the source was ready. A browser that
+     * refuses sound without a tap (code 1) gets it muted instead, as autoplay
+     * is everywhere, and the mute button turns it up.
+     */
+    private startRequestedPlay;
     play(): Promise<void>;
     pause(): void;
     togglePlay(): void;

package/dist/providers/vimeo.d.ts

@@ -48,6 +48,10 @@ interface VimeoPlayer {
     pause(): Promise<void>;
     unload(): Promise<void>;
     destroy(): Promise<void>;
+    loadVideo(id: number | string | {
+        id: number;
+        h?: string;
+    }): Promise<number>;
     getCurrentTime(): Promise<number>;
     setCurrentTime(seconds: number): Promise<number>;
     getDuration(): Promise<number>;
@@ -118,6 +122,8 @@ export declare class VimeoProvider extends BaseProvider {
     protected cleanup(): void;
     canPlay(src: Src): boolean;
     load(src: Src): Promise<void>;
+    /** What a loaded video tells the player: ready, its length, qualities and shape. */
+    private announceLoaded;
     private attachVimeoEvents;
     private updateQualities;
     play(): Promise<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-video-player",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "A modern, framework-agnostic video player with deep stx integration",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",

package/src/core/events.ts

@@ -208,7 +208,12 @@ export class MediaEventsNormalizer {
 export function onFullscreenChange(handler: (fullscreen: boolean) => void): () => void {
   const events = ['fullscreenchange', 'webkitfullscreenchange', 'mozfullscreenchange', 'MSFullscreenChange']
 
-  const listener = () => {
+  const listener = (event?: Event) => {
+    // The browser's own change only. <video-player> re-dispatches the player's
+    // events on itself, bubbling and composed, under the same names; its
+    // "fullscreenchange" reached this document listener, which announced it
+    // again, and the two fed each other until the stack overflowed.
+    if (event && typeof CustomEvent !== 'undefined' && event instanceof CustomEvent) return
     const fullscreen = !!(
       document.fullscreenElement ||
       (document as any).webkitFullscreenElement ||
@@ -261,8 +266,8 @@ export const DEFAULT_KEYBOARD_SHORTCUTS: Record<string, string> = {
   c: 'toggleCaptions',
   ArrowLeft: 'seekBackward',
   ArrowRight: 'seekForward',
-  j: 'seekBackward',
-  l: 'seekForward',
+  j: 'seekBackwardLong',
+  l: 'seekForwardLong',
   ArrowUp: 'volumeUp',
   ArrowDown: 'volumeDown',
   '>': 'speedUp',
@@ -292,6 +297,9 @@ export interface KeyboardActions {
   toggleCaptions(): void
   seekBackward(): void
   seekForward(): void
+  /** J and L: ten seconds, as YouTube's keys go (the arrows are five). Falls back to seekBackward/seekForward. */
+  seekBackwardLong?(): void
+  seekForwardLong?(): void
   volumeUp(): void
   volumeDown(): void
   speedUp(): void
@@ -351,6 +359,14 @@ export function createKeyboardHandler(
       case 'seekForward':
         actions.seekForward()
         break
+      case 'seekBackwardLong':
+        if (actions.seekBackwardLong) actions.seekBackwardLong()
+        else actions.seekBackward()
+        break
+      case 'seekForwardLong':
+        if (actions.seekForwardLong) actions.seekForwardLong()
+        else actions.seekForward()
+        break
       case 'volumeUp':
         actions.volumeUp()
         break

package/src/core/i18n.ts

@@ -74,6 +74,31 @@ export interface TranslationStrings {
   close: string
   menu: string
   back: string
+  // The controls' own names and what a screen reader hears (elements/*)
+  seek: string
+  playbackRate: string
+  airPlayPlay: string
+  remotePlayback: string
+  videoPlayer: string
+  videoRole: string
+  playTitle: string
+  audio: string
+  defaultTrack: string
+  playing: string
+  paused: string
+  muted: string
+  volumeLevel: string
+  ended: string
+  enteredFullscreen: string
+  exitedFullscreen: string
+  errorMessage: string
+  timeOf: string
+  hourOne: string
+  hourOther: string
+  minuteOne: string
+  minuteOther: string
+  secondOne: string
+  secondOther: string
 }
 
 export type TranslationKey = keyof TranslationStrings
@@ -157,6 +182,30 @@ export const englishStrings: TranslationStrings = {
   close: 'Close',
   menu: 'Menu',
   back: 'Back',
+  seek: 'Seek',
+  playbackRate: 'Playback speed {rate}x',
+  airPlayPlay: 'Play on AirPlay',
+  remotePlayback: 'Play on another device',
+  videoPlayer: 'Video player',
+  videoRole: 'video player',
+  playTitle: 'Play {title}',
+  audio: 'Audio',
+  defaultTrack: 'Default',
+  playing: 'Playing',
+  paused: 'Paused',
+  muted: 'Muted',
+  volumeLevel: 'Volume {percent}%',
+  ended: 'Playback ended',
+  enteredFullscreen: 'Entered fullscreen',
+  exitedFullscreen: 'Exited fullscreen',
+  errorMessage: 'Error: {message}',
+  timeOf: '{current} of {duration}',
+  hourOne: '{n} hour',
+  hourOther: '{n} hours',
+  minuteOne: '{n} minute',
+  minuteOther: '{n} minutes',
+  secondOne: '{n} second',
+  secondOther: '{n} seconds',
 }
 
 export const spanishStrings: TranslationStrings = {
@@ -209,6 +258,30 @@ export const spanishStrings: TranslationStrings = {
   close: 'Cerrar',
   menu: 'Menú',
   back: 'Volver',
+  seek: 'Buscar',
+  playbackRate: 'Velocidad de reproducción {rate}x',
+  airPlayPlay: 'Reproducir con AirPlay',
+  remotePlayback: 'Reproducir en otro dispositivo',
+  videoPlayer: 'Reproductor de vídeo',
+  videoRole: 'reproductor de vídeo',
+  playTitle: 'Reproducir {title}',
+  audio: 'Audio',
+  defaultTrack: 'Predeterminado',
+  playing: 'Reproduciendo',
+  paused: 'En pausa',
+  muted: 'Silenciado',
+  volumeLevel: 'Volumen {percent}%',
+  ended: 'Reproducción finalizada',
+  enteredFullscreen: 'Pantalla completa activada',
+  exitedFullscreen: 'Pantalla completa desactivada',
+  errorMessage: 'Error: {message}',
+  timeOf: '{current} de {duration}',
+  hourOne: '{n} hora',
+  hourOther: '{n} horas',
+  minuteOne: '{n} minuto',
+  minuteOther: '{n} minutos',
+  secondOne: '{n} segundo',
+  secondOther: '{n} segundos',
 }
 
 export const frenchStrings: TranslationStrings = {
@@ -261,6 +334,30 @@ export const frenchStrings: TranslationStrings = {
   close: 'Fermer',
   menu: 'Menu',
   back: 'Retour',
+  seek: 'Rechercher',
+  playbackRate: 'Vitesse de lecture {rate}x',
+  airPlayPlay: 'Lire avec AirPlay',
+  remotePlayback: 'Lire sur un autre appareil',
+  videoPlayer: 'Lecteur vidéo',
+  videoRole: 'lecteur vidéo',
+  playTitle: 'Lire {title}',
+  audio: 'Audio',
+  defaultTrack: 'Par défaut',
+  playing: 'Lecture',
+  paused: 'En pause',
+  muted: 'Son coupé',
+  volumeLevel: 'Volume {percent} %',
+  ended: 'Lecture terminée',
+  enteredFullscreen: 'Plein écran activé',
+  exitedFullscreen: 'Plein écran désactivé',
+  errorMessage: 'Erreur : {message}',
+  timeOf: '{current} sur {duration}',
+  hourOne: '{n} heure',
+  hourOther: '{n} heures',
+  minuteOne: '{n} minute',
+  minuteOther: '{n} minutes',
+  secondOne: '{n} seconde',
+  secondOther: '{n} secondes',
 }
 
 export const germanStrings: TranslationStrings = {
@@ -313,6 +410,30 @@ export const germanStrings: TranslationStrings = {
   close: 'Schließen',
   menu: 'Menü',
   back: 'Zurück',
+  seek: 'Spulen',
+  playbackRate: 'Wiedergabegeschwindigkeit {rate}x',
+  airPlayPlay: 'Über AirPlay abspielen',
+  remotePlayback: 'Auf einem anderen Gerät abspielen',
+  videoPlayer: 'Videoplayer',
+  videoRole: 'Videoplayer',
+  playTitle: '{title} abspielen',
+  audio: 'Audio',
+  defaultTrack: 'Standard',
+  playing: 'Wird abgespielt',
+  paused: 'Pausiert',
+  muted: 'Stumm',
+  volumeLevel: 'Lautstärke {percent} %',
+  ended: 'Wiedergabe beendet',
+  enteredFullscreen: 'Vollbild an',
+  exitedFullscreen: 'Vollbild aus',
+  errorMessage: 'Fehler: {message}',
+  timeOf: '{current} von {duration}',
+  hourOne: '{n} Stunde',
+  hourOther: '{n} Stunden',
+  minuteOne: '{n} Minute',
+  minuteOther: '{n} Minuten',
+  secondOne: '{n} Sekunde',
+  secondOther: '{n} Sekunden',
 }
 
 export const japaneseStrings: TranslationStrings = {
@@ -365,6 +486,30 @@ export const japaneseStrings: TranslationStrings = {
   close: '閉じる',
   menu: 'メニュー',
   back: '戻る',
+  seek: 'シーク',
+  playbackRate: '再生速度 {rate}x',
+  airPlayPlay: 'AirPlayで再生',
+  remotePlayback: '別のデバイスで再生',
+  videoPlayer: '動画プレーヤー',
+  videoRole: '動画プレーヤー',
+  playTitle: '{title}を再生',
+  audio: '音声',
+  defaultTrack: 'デフォルト',
+  playing: '再生中',
+  paused: '一時停止中',
+  muted: 'ミュート',
+  volumeLevel: '音量 {percent}%',
+  ended: '再生終了',
+  enteredFullscreen: '全画面表示',
+  exitedFullscreen: '全画面表示を終了',
+  errorMessage: 'エラー: {message}',
+  timeOf: '{current} / {duration}',
+  hourOne: '{n}時間',
+  hourOther: '{n}時間',
+  minuteOne: '{n}分',
+  minuteOther: '{n}分',
+  secondOne: '{n}秒',
+  secondOther: '{n}秒',
 }
 
 export const chineseStrings: TranslationStrings = {
@@ -417,6 +562,30 @@ export const chineseStrings: TranslationStrings = {
   close: '关闭',
   menu: '菜单',
   back: '返回',
+  seek: '跳转',
+  playbackRate: '播放速度 {rate}x',
+  airPlayPlay: '通过 AirPlay 播放',
+  remotePlayback: '在其他设备上播放',
+  videoPlayer: '视频播放器',
+  videoRole: '视频播放器',
+  playTitle: '播放{title}',
+  audio: '音频',
+  defaultTrack: '默认',
+  playing: '正在播放',
+  paused: '已暂停',
+  muted: '已静音',
+  volumeLevel: '音量 {percent}%',
+  ended: '播放结束',
+  enteredFullscreen: '已进入全屏',
+  exitedFullscreen: '已退出全屏',
+  errorMessage: '错误：{message}',
+  timeOf: '{current} / {duration}',
+  hourOne: '{n}小时',
+  hourOther: '{n}小时',
+  minuteOne: '{n}分钟',
+  minuteOther: '{n}分钟',
+  secondOne: '{n}秒',
+  secondOther: '{n}秒',
 }
 
 export const defaultTranslations: Record<string, TranslationStrings> = {
@@ -439,9 +608,12 @@ export class I18n {
   private interpolationPattern: RegExp
 
   constructor(config: I18nConfig = {}) {
+    // The translations first: detectLanguage() looks the browser's language
+    // up in them, and before they were set it threw for every instance made
+    // without a language.
+    this.translations = { ...defaultTranslations }
     this.language = config.language || this.detectLanguage() || 'en'
     this.fallbackLanguage = config.fallbackLanguage || 'en'
-    this.translations = { ...defaultTranslations }
 
     // Merge custom translations
     if (config.translations) {

package/src/elements/media-airplay-button.ts

@@ -5,7 +5,7 @@
  */
 
 import { HTMLElementBase } from './base'
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const AIRPLAY_ICON = 'M6.2 19h11.6L12 13.2 6.2 19zM19 3H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h2v-2H5V5h14v10h-2v2h2a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'
 
@@ -27,8 +27,10 @@ export class MediaAirplayButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Play on AirPlay">
+        <button part="button" type="button" aria-label="${label(this, 'airPlayPlay')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${AIRPLAY_ICON}"/></svg>
         </button>
       `

package/src/elements/media-fullscreen-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-fullscreen-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const ENTER_FS = 'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z'
 const EXIT_FS = 'M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z'
@@ -28,8 +28,10 @@ export class MediaFullscreenButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Enter fullscreen">
+        <button part="button" type="button" aria-label="${label(this, 'enterFullscreen')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${ENTER_FS}"/>
           </svg>
@@ -62,7 +64,7 @@ export class MediaFullscreenButton extends HTMLElementBase {
       btn.disabled = avail !== 'available'
 
       const fs = state.fullscreen
-      btn.setAttribute('aria-label', fs ? 'Exit fullscreen' : 'Enter fullscreen')
+      btn.setAttribute('aria-label', label(this, fs ? 'exitFullscreen' : 'enterFullscreen'))
       const path = this.shadowRoot!.querySelector('path')!
       path.setAttribute('d', fs ? EXIT_FS : ENTER_FS)
     })

package/src/elements/media-live-button.ts

@@ -5,7 +5,7 @@
  */
 
 import { HTMLElementBase } from './base'
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 export class MediaLiveButton extends HTMLElementBase {
   private cleanup: (() => void) | null = null
@@ -20,8 +20,10 @@ export class MediaLiveButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; }
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Go to live edge"><i aria-hidden="true"></i><span>LIVE</span></button>
+        <button part="button" type="button" aria-label="${label(this, 'seekToLive')}"><i aria-hidden="true"></i><span>${label(this, 'live')}</span></button>
       `
     }
     queueMicrotask(() => this.attach())

package/src/elements/media-mute-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-mute-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const ICON_MUTED = 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51A8.796 8.796 0 0 0 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3 3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06a8.99 8.99 0 0 0 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4 9.91 6.09 12 8.18V4z'
 const ICON_LOW = 'M18.5 12A4.5 4.5 0 0 0 16 7.97v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z'
@@ -33,8 +33,10 @@ export class MediaMuteButton extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Mute">
+        <button part="button" type="button" aria-label="${label(this, 'mute')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${ICON_HIGH}"/>
           </svg>
@@ -59,7 +61,7 @@ export class MediaMuteButton extends HTMLElementBase {
 
     const unsub = player.subscribe((state: any) => {
       const icon = getVolumeIcon(state.muted, state.volume)
-      btn.setAttribute('aria-label', state.muted ? 'Unmute' : 'Mute')
+      btn.setAttribute('aria-label', label(this, state.muted ? 'unmute' : 'mute'))
       const path = this.shadowRoot!.querySelector('path')!
       path.setAttribute('d', icon)
     })

package/src/elements/media-pip-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-pip-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const PIP_ICON = 'M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h18v14z'
 
@@ -27,8 +27,10 @@ export class MediaPipButton extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Picture in picture">
+        <button part="button" type="button" aria-label="${label(this, 'enterPiP')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${PIP_ICON}"/>
           </svg>
@@ -59,6 +61,7 @@ export class MediaPipButton extends HTMLElementBase {
         this.removeAttribute('hidden')
       }
       btn.disabled = avail !== 'available'
+      btn.setAttribute('aria-label', label(this, state.pictureInPicture ? 'exitPiP' : 'enterPiP'))
     })
 
     this._cleanup = unsub

package/src/elements/media-play-button.ts

@@ -4,7 +4,7 @@
  * @module elements/media-play-button
  */
 
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const PLAY_ICON = 'M8 5v14l11-7z'
 const PAUSE_ICON = 'M6 19h4V5H6v14zm8-14v14h4V5h-4z'
@@ -27,8 +27,10 @@ export class MediaPlayButton extends HTMLElementBase {
             background: transparent; border: none; color: inherit; cursor: pointer;
           }
           button:hover { opacity: 0.8; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Play">
+        <button part="button" type="button" aria-label="${label(this, 'play')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${PLAY_ICON}"/>
           </svg>
@@ -58,7 +60,7 @@ export class MediaPlayButton extends HTMLElementBase {
 
     const unsub = player.subscribe('paused', (state: any) => {
       const paused = state.paused
-      btn.setAttribute('aria-label', paused ? 'Play' : 'Pause')
+      btn.setAttribute('aria-label', label(this, paused ? 'play' : 'pause'))
       btn.setAttribute('aria-pressed', String(!paused))
       const path = this.shadowRoot!.querySelector('path')!
       path.setAttribute('d', paused ? PLAY_ICON : PAUSE_ICON)

package/src/elements/media-playback-rate-button.ts

@@ -1,4 +1,4 @@
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 import type { PlayerState } from '../types'
 
 const defaultRates = [0.5, 0.75, 1, 1.25, 1.5, 2]
@@ -18,8 +18,10 @@ export class MediaPlaybackRateButton extends HTMLElementBase {
           button { min-width: 42px; height: 40px; padding: 0 8px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; font-variant-numeric: tabular-nums; }
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Playback speed"></button>
+        <button part="button" type="button" aria-label="${label(this, 'speed')}"></button>
       `
     }
     queueMicrotask(() => this.attach())
@@ -53,7 +55,7 @@ export class MediaPlaybackRateButton extends HTMLElementBase {
     button.addEventListener('click', this.onClick)
     this.cleanup = player.subscribe('playbackRate', (state: PlayerState) => {
       button.textContent = `${state.playbackRate}x`
-      button.setAttribute('aria-label', `Playback speed ${state.playbackRate}x`)
+      button.setAttribute('aria-label', label(this, 'playbackRate', { rate: state.playbackRate }))
     })
   }
 }

package/src/elements/media-progress-bar.ts

@@ -6,7 +6,7 @@
  * @module elements/media-progress-bar
  */
 
-import { resolvePlayer, formatTime, formatTimePhrase } from './utils'
+import { label, resolvePlayer, formatTime, formatTimePhrase } from './utils'
 
 import { HTMLElementBase } from './base'
 
@@ -65,10 +65,12 @@ export class MediaProgressBar extends HTMLElementBase {
             border-top-color: rgba(0,0,0,0.85);
           }
           .container:hover .tooltip { opacity: 1; }
+          /* A finger needs more than the 20px a mouse does. */
+          @media (pointer: coarse) { .container { height: 36px; } .thumb { width: 18px; height: 18px; } }
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"
-          aria-label="Seek" tabindex="0">
+          aria-label="${label(this, 'seek')}" tabindex="0">
           <div class="tooltip" part="tooltip">0:00</div>
           <div class="track" part="track">
             <div class="waveform" part="waveform" aria-hidden="true"></div>
@@ -188,7 +190,7 @@ export class MediaProgressBar extends HTMLElementBase {
       thumb.style.left = `${percent}%`
 
       container.setAttribute('aria-valuenow', String(Math.round(percent)))
-      container.setAttribute('aria-valuetext', `${formatTimePhrase(state.currentTime)} of ${formatTimePhrase(duration)}`)
+      container.setAttribute('aria-valuetext', label(this, 'timeOf', { current: formatTimePhrase(state.currentTime, this), duration: formatTimePhrase(duration, this) }))
 
       // Buffered
       const bufferedPct = (state.bufferedAmount || 0) * 100

package/src/elements/media-remote-playback-button.ts

@@ -8,7 +8,7 @@
  */
 
 import { HTMLElementBase } from './base'
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 
 const REMOTE_ICON = 'M1 18v3h3a3 3 0 0 0-3-3zm0-4v2a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7zm0-4v2c5 0 9 4 9 9h2c0-6.1-4.9-11-11-11zm18-7H5a2 2 0 0 0-2 2v3h2V5h14v10h-5v2h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z'
 
@@ -32,8 +32,10 @@ export class MediaRemotePlaybackButton extends HTMLElementBase {
           button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; }
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
-        <button part="button" type="button" aria-label="Play on another device">
+        <button part="button" type="button" aria-label="${label(this, 'remotePlayback')}">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon"><path d="${REMOTE_ICON}"/></svg>
         </button>
       `

package/src/elements/media-seek-button.ts

@@ -1,4 +1,4 @@
-import { resolvePlayer } from './utils'
+import { label, resolvePlayer } from './utils'
 import type { PlayerState } from '../types'
 
 import { HTMLElementBase } from './base'
@@ -17,6 +17,8 @@ export class MediaSeekButton extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
           button:disabled { cursor: default; opacity: .45; }
+          /* 44px, the smallest a finger hits reliably, on a touch screen. */
+          @media (pointer: coarse) { button { min-width: 44px; min-height: 44px; } }
         </style>
         <button part="button" type="button"></button>
       `
@@ -38,9 +40,8 @@ export class MediaSeekButton extends HTMLElementBase {
     if (!player || !button) return
     const seconds = Number.parseFloat(this.getAttribute('seconds') ?? '10')
     const offset = Number.isFinite(seconds) && seconds !== 0 ? seconds : 10
-    const label = offset > 0 ? `Forward ${offset} seconds` : `Back ${Math.abs(offset)} seconds`
     button.textContent = offset > 0 ? `+${offset}` : String(offset)
-    button.setAttribute('aria-label', label)
+    button.setAttribute('aria-label', label(this, offset > 0 ? 'seekForward' : 'seekBackward', { seconds: Math.abs(offset) }))
     this.onClick = () => player.seekBy(offset)
     button.addEventListener('click', this.onClick)
     this.cleanup = player.subscribe((state: PlayerState) => {