ts-video-player 0.1.6 → 0.1.8

package/dist/{chunk-fvz33zn4.js → chunk-hvjcmbfn.js}

@@ -625,6 +625,7 @@ class YouTubeProvider2 extends BaseProvider2 {
   endTime;
   timeUpdateInterval = null;
   lastState = -1;
+  pendingPlay = false;
   get mediaElement() {
     return this.iframe;
   }
@@ -702,6 +703,7 @@ class YouTubeProvider2 extends BaseProvider2 {
     this.player?.destroy();
     this.player = null;
     this.playerReady = false;
+    this.pendingPlay = false;
     this.iframe = null;
   }
   onReady() {
@@ -714,8 +716,12 @@ class YouTubeProvider2 extends BaseProvider2 {
     this.events.emit("loadedmetadata");
     this.events.emit("canplay");
     if (this.pendingVideoId) {
-      this.loadVideo(this.pendingVideoId, this.startTime, this.endTime);
+      const videoId = this.pendingVideoId;
       this.pendingVideoId = null;
+      this.loadVideo(videoId, this.startTime, this.endTime);
+    } else if (this.pendingPlay) {
+      this.pendingPlay = false;
+      this.player?.playVideo();
     }
   }
   onStateChange(event) {
@@ -727,6 +733,8 @@ class YouTubeProvider2 extends BaseProvider2 {
         this.events.emit("loadstart");
         break;
       case PlayerState.PLAYING:
+        if (this.getDuration() > 0)
+          this.events.emit("durationchange", this.getDuration());
         this.events.emit("play");
         this.events.emit("playing");
         this.events.emit("statechange", { paused: false, playing: true, waiting: false });
@@ -787,7 +795,8 @@ class YouTubeProvider2 extends BaseProvider2 {
   loadVideo(videoId, startTime, endTime) {
     if (!this.player)
       return;
-    if (this.options.autoplay) {
+    if (this.options.autoplay || this.pendingPlay) {
+      this.pendingPlay = false;
       this.player.loadVideoById({
         videoId,
         startSeconds: startTime,
@@ -802,13 +811,21 @@ class YouTubeProvider2 extends BaseProvider2 {
     }
   }
   async play() {
-    this.player?.playVideo();
+    if (!this.player || !this.playerReady || this.pendingVideoId) {
+      this.pendingPlay = true;
+      return;
+    }
+    this.player.playVideo();
   }
   pause() {
-    this.player?.pauseVideo();
+    this.pendingPlay = false;
+    if (this.playerReady)
+      this.player?.pauseVideo();
   }
   stop() {
-    this.player?.stopVideo();
+    this.pendingPlay = false;
+    if (this.playerReady)
+      this.player?.stopVideo();
   }
   seekTo(time) {
     this.player?.seekTo(time, true);
@@ -1009,8 +1026,9 @@ class VimeoProvider2 extends BaseProvider2 {
       return;
     }
     if (this.player) {
-      await this.player.destroy();
-      this.player = null;
+      await this.player.loadVideo(parseInt(parsed.videoId, 10));
+      await this.announceLoaded();
+      return;
     }
     const playerOptions = {
       id: parseInt(parsed.videoId, 10),
@@ -1034,6 +1052,11 @@ class VimeoProvider2 extends BaseProvider2 {
       this.iframe.style.cssText = "position:absolute;inset:0;width:100%;height:100%;border:0";
     }
     this.attachVimeoEvents();
+    await this.announceLoaded();
+  }
+  async announceLoaded() {
+    if (!this.player)
+      return;
     this.events.emit("loadedmetadata");
     this.events.emit("canplay");
     this._duration = await this.player.getDuration();
@@ -2025,6 +2048,630 @@ function embedCover(state, dismissed) {
   return { show: true, image: youtubeId ? `https://i.ytimg.com/vi/${youtubeId}/hqdefault.jpg` : "" };
 }
 
+// src/core/i18n.ts
+var englishStrings2 = {
+  play: "Play",
+  pause: "Pause",
+  replay: "Replay",
+  mute: "Mute",
+  unmute: "Unmute",
+  volume: "Volume",
+  seekBackward: "Seek backward {seconds} seconds",
+  seekForward: "Seek forward {seconds} seconds",
+  seekTo: "Seek to {time}",
+  duration: "Duration",
+  currentTime: "Current time",
+  played: "Played",
+  buffered: "Buffered",
+  enterFullscreen: "Enter fullscreen",
+  exitFullscreen: "Exit fullscreen",
+  enterPiP: "Enter picture-in-picture",
+  exitPiP: "Exit picture-in-picture",
+  enableCaptions: "Enable captions",
+  disableCaptions: "Disable captions",
+  captions: "Captions",
+  captionsOff: "Off",
+  settings: "Settings",
+  quality: "Quality",
+  auto: "Auto",
+  speed: "Speed",
+  normal: "Normal",
+  loop: "Loop",
+  loopEnabled: "Loop enabled",
+  loopDisabled: "Loop disabled",
+  audioBoost: "Audio boost",
+  audioTrack: "Audio track",
+  live: "LIVE",
+  liveEdge: "At live edge",
+  seekToLive: "Seek to live edge",
+  behindLive: "{seconds}s behind",
+  networkError: "A network error occurred",
+  mediaError: "The media could not be loaded",
+  unknownError: "An unknown error occurred",
+  loading: "Loading",
+  buffering: "Buffering",
+  chapters: "Chapters",
+  airPlay: "AirPlay",
+  googleCast: "Cast",
+  casting: "Casting to {device}",
+  download: "Download",
+  share: "Share",
+  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"
+};
+var spanishStrings2 = {
+  play: "Reproducir",
+  pause: "Pausar",
+  replay: "Repetir",
+  mute: "Silenciar",
+  unmute: "Activar sonido",
+  volume: "Volumen",
+  seekBackward: "Retroceder {seconds} segundos",
+  seekForward: "Avanzar {seconds} segundos",
+  seekTo: "Ir a {time}",
+  duration: "Duración",
+  currentTime: "Tiempo actual",
+  played: "Reproducido",
+  buffered: "Almacenado",
+  enterFullscreen: "Pantalla completa",
+  exitFullscreen: "Salir de pantalla completa",
+  enterPiP: "Imagen en imagen",
+  exitPiP: "Salir de imagen en imagen",
+  enableCaptions: "Activar subtítulos",
+  disableCaptions: "Desactivar subtítulos",
+  captions: "Subtítulos",
+  captionsOff: "Desactivados",
+  settings: "Ajustes",
+  quality: "Calidad",
+  auto: "Automático",
+  speed: "Velocidad",
+  normal: "Normal",
+  loop: "Bucle",
+  loopEnabled: "Bucle activado",
+  loopDisabled: "Bucle desactivado",
+  audioBoost: "Aumento de audio",
+  audioTrack: "Pista de audio",
+  live: "EN VIVO",
+  liveEdge: "En vivo",
+  seekToLive: "Ir al directo",
+  behindLive: "{seconds}s de retraso",
+  networkError: "Error de red",
+  mediaError: "No se pudo cargar el medio",
+  unknownError: "Error desconocido",
+  loading: "Cargando",
+  buffering: "Almacenando",
+  chapters: "Capítulos",
+  airPlay: "AirPlay",
+  googleCast: "Enviar",
+  casting: "Enviando a {device}",
+  download: "Descargar",
+  share: "Compartir",
+  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"
+};
+var frenchStrings2 = {
+  play: "Lecture",
+  pause: "Pause",
+  replay: "Relire",
+  mute: "Muet",
+  unmute: "Son activé",
+  volume: "Volume",
+  seekBackward: "Reculer de {seconds} secondes",
+  seekForward: "Avancer de {seconds} secondes",
+  seekTo: "Aller à {time}",
+  duration: "Durée",
+  currentTime: "Temps actuel",
+  played: "Joué",
+  buffered: "Mis en mémoire tampon",
+  enterFullscreen: "Plein écran",
+  exitFullscreen: "Quitter le plein écran",
+  enterPiP: "Image dans l'image",
+  exitPiP: "Quitter l'image dans l'image",
+  enableCaptions: "Activer les sous-titres",
+  disableCaptions: "Désactiver les sous-titres",
+  captions: "Sous-titres",
+  captionsOff: "Désactivés",
+  settings: "Paramètres",
+  quality: "Qualité",
+  auto: "Auto",
+  speed: "Vitesse",
+  normal: "Normal",
+  loop: "Boucle",
+  loopEnabled: "Boucle activée",
+  loopDisabled: "Boucle désactivée",
+  audioBoost: "Amplification audio",
+  audioTrack: "Piste audio",
+  live: "EN DIRECT",
+  liveEdge: "En direct",
+  seekToLive: "Aller au direct",
+  behindLive: "{seconds}s de retard",
+  networkError: "Erreur réseau",
+  mediaError: "Le média n'a pas pu être chargé",
+  unknownError: "Erreur inconnue",
+  loading: "Chargement",
+  buffering: "Mise en mémoire tampon",
+  chapters: "Chapitres",
+  airPlay: "AirPlay",
+  googleCast: "Caster",
+  casting: "Diffusion sur {device}",
+  download: "Télécharger",
+  share: "Partager",
+  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"
+};
+var germanStrings2 = {
+  play: "Abspielen",
+  pause: "Pause",
+  replay: "Wiederholen",
+  mute: "Stumm",
+  unmute: "Ton an",
+  volume: "Lautstärke",
+  seekBackward: "{seconds} Sekunden zurück",
+  seekForward: "{seconds} Sekunden vor",
+  seekTo: "Zu {time} springen",
+  duration: "Dauer",
+  currentTime: "Aktuelle Zeit",
+  played: "Abgespielt",
+  buffered: "Gepuffert",
+  enterFullscreen: "Vollbild",
+  exitFullscreen: "Vollbild beenden",
+  enterPiP: "Bild-in-Bild",
+  exitPiP: "Bild-in-Bild beenden",
+  enableCaptions: "Untertitel aktivieren",
+  disableCaptions: "Untertitel deaktivieren",
+  captions: "Untertitel",
+  captionsOff: "Aus",
+  settings: "Einstellungen",
+  quality: "Qualität",
+  auto: "Auto",
+  speed: "Geschwindigkeit",
+  normal: "Normal",
+  loop: "Schleife",
+  loopEnabled: "Schleife aktiviert",
+  loopDisabled: "Schleife deaktiviert",
+  audioBoost: "Audio-Verstärkung",
+  audioTrack: "Audiospur",
+  live: "LIVE",
+  liveEdge: "Am Live-Punkt",
+  seekToLive: "Zum Live-Punkt",
+  behindLive: "{seconds}s hinter Live",
+  networkError: "Netzwerkfehler",
+  mediaError: "Medium konnte nicht geladen werden",
+  unknownError: "Unbekannter Fehler",
+  loading: "Wird geladen",
+  buffering: "Puffern",
+  chapters: "Kapitel",
+  airPlay: "AirPlay",
+  googleCast: "Streamen",
+  casting: "Streame zu {device}",
+  download: "Herunterladen",
+  share: "Teilen",
+  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"
+};
+var japaneseStrings2 = {
+  play: "再生",
+  pause: "一時停止",
+  replay: "リプレイ",
+  mute: "ミュート",
+  unmute: "ミュート解除",
+  volume: "音量",
+  seekBackward: "{seconds}秒戻る",
+  seekForward: "{seconds}秒進む",
+  seekTo: "{time}にシーク",
+  duration: "長さ",
+  currentTime: "現在の時間",
+  played: "再生済み",
+  buffered: "バッファ済み",
+  enterFullscreen: "フルスクリーン",
+  exitFullscreen: "フルスクリーン終了",
+  enterPiP: "ピクチャーインピクチャー",
+  exitPiP: "ピクチャーインピクチャー終了",
+  enableCaptions: "字幕を有効化",
+  disableCaptions: "字幕を無効化",
+  captions: "字幕",
+  captionsOff: "オフ",
+  settings: "設定",
+  quality: "画質",
+  auto: "自動",
+  speed: "再生速度",
+  normal: "通常",
+  loop: "ループ",
+  loopEnabled: "ループ有効",
+  loopDisabled: "ループ無効",
+  audioBoost: "オーディオブースト",
+  audioTrack: "オーディオトラック",
+  live: "ライブ",
+  liveEdge: "ライブ中",
+  seekToLive: "ライブに移動",
+  behindLive: "{seconds}秒遅れ",
+  networkError: "ネットワークエラー",
+  mediaError: "メディアを読み込めません",
+  unknownError: "不明なエラー",
+  loading: "読み込み中",
+  buffering: "バッファリング",
+  chapters: "チャプター",
+  airPlay: "AirPlay",
+  googleCast: "キャスト",
+  casting: "{device}にキャスト中",
+  download: "ダウンロード",
+  share: "共有",
+  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}秒"
+};
+var chineseStrings2 = {
+  play: "播放",
+  pause: "暂停",
+  replay: "重播",
+  mute: "静音",
+  unmute: "取消静音",
+  volume: "音量",
+  seekBackward: "后退{seconds}秒",
+  seekForward: "前进{seconds}秒",
+  seekTo: "跳转到{time}",
+  duration: "时长",
+  currentTime: "当前时间",
+  played: "已播放",
+  buffered: "已缓冲",
+  enterFullscreen: "全屏",
+  exitFullscreen: "退出全屏",
+  enterPiP: "画中画",
+  exitPiP: "退出画中画",
+  enableCaptions: "开启字幕",
+  disableCaptions: "关闭字幕",
+  captions: "字幕",
+  captionsOff: "关闭",
+  settings: "设置",
+  quality: "画质",
+  auto: "自动",
+  speed: "播放速度",
+  normal: "正常",
+  loop: "循环",
+  loopEnabled: "循环已开启",
+  loopDisabled: "循环已关闭",
+  audioBoost: "音频增强",
+  audioTrack: "音轨",
+  live: "直播",
+  liveEdge: "直播中",
+  seekToLive: "跳转到直播",
+  behindLive: "落后{seconds}秒",
+  networkError: "网络错误",
+  mediaError: "无法加载媒体",
+  unknownError: "未知错误",
+  loading: "加载中",
+  buffering: "缓冲中",
+  chapters: "章节",
+  airPlay: "AirPlay",
+  googleCast: "投射",
+  casting: "正在投射到{device}",
+  download: "下载",
+  share: "分享",
+  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}秒"
+};
+var defaultTranslations2 = {
+  en: englishStrings2,
+  es: spanishStrings2,
+  fr: frenchStrings2,
+  de: germanStrings2,
+  ja: japaneseStrings2,
+  zh: chineseStrings2
+};
+
+class I18n2 {
+  language;
+  fallbackLanguage;
+  translations;
+  interpolationPattern;
+  constructor(config = {}) {
+    this.translations = { ...defaultTranslations2 };
+    this.language = config.language || this.detectLanguage() || "en";
+    this.fallbackLanguage = config.fallbackLanguage || "en";
+    if (config.translations) {
+      for (const [lang, strings] of Object.entries(config.translations)) {
+        if (strings) {
+          this.translations[lang] = { ...this.translations[lang], ...strings };
+        }
+      }
+    }
+    this.interpolationPattern = config.interpolationPattern || /\{(\w+)\}/g;
+  }
+  detectLanguage() {
+    if (typeof navigator === "undefined")
+      return null;
+    const lang = navigator.language || navigator.userLanguage;
+    if (!lang)
+      return null;
+    if (this.translations[lang]) {
+      return lang;
+    }
+    const baseLang = lang.split("-")[0];
+    if (this.translations[baseLang]) {
+      return baseLang;
+    }
+    return null;
+  }
+  getLanguage() {
+    return this.language;
+  }
+  setLanguage(language) {
+    this.language = language;
+  }
+  t(key, params) {
+    let str = this.translations[this.language]?.[key];
+    if (!str) {
+      str = this.translations[this.fallbackLanguage]?.[key];
+    }
+    if (!str) {
+      return key;
+    }
+    if (params) {
+      str = str.replace(this.interpolationPattern, (match, paramKey) => {
+        const value = params[paramKey];
+        return value !== undefined ? String(value) : match;
+      });
+    }
+    return str;
+  }
+  addTranslations(language, strings) {
+    this.translations[language] = {
+      ...this.translations[language],
+      ...strings
+    };
+  }
+  getTranslations(language) {
+    return this.translations[language];
+  }
+  getAvailableLanguages() {
+    return Object.keys(this.translations);
+  }
+  hasLanguage(language) {
+    return language in this.translations;
+  }
+}
+var globalI18n = null;
+function createI18n2(config) {
+  return new I18n2(config);
+}
+function getI18n2(config) {
+  if (!globalI18n) {
+    globalI18n = createI18n2(config);
+  }
+  return globalI18n;
+}
+function setI18n2(i18n) {
+  globalI18n = i18n;
+}
+function t2(key, params) {
+  return getI18n2().t(key, params);
+}
+
+// src/elements/utils.ts
+function languageOf(el) {
+  let node = el;
+  while (node) {
+    const tagged = node.closest?.("[lang]")?.getAttribute("lang");
+    if (tagged)
+      return tagged.toLowerCase();
+    const root = node.getRootNode?.();
+    node = root && root.host ? root.host : null;
+  }
+  if (typeof navigator !== "undefined" && navigator.language)
+    return navigator.language.toLowerCase();
+  return "en";
+}
+function label(el, key, params) {
+  const lang = languageOf(el);
+  const i18n = getI18n2();
+  const text = i18n.getTranslations(lang)?.[key] || i18n.getTranslations(lang.split("-")[0])?.[key] || englishStrings2[key] || key;
+  return params ? text.replace(/\{(\w+)\}/g, (match, name) => params[name] !== undefined ? String(params[name]) : match) : text;
+}
+function formatTime2(seconds, guide = 0) {
+  if (!isFinite(seconds) || isNaN(seconds))
+    return "0:00";
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  const showHours = h > 0 || guide >= 3600;
+  if (showHours) {
+    return `${h}:${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
+  }
+  return `${m}:${sec.toString().padStart(2, "0")}`;
+}
+function formatTimePhrase2(seconds, el) {
+  const say = (n, one, other) => label(el, n === 1 ? one : other, { n });
+  if (!isFinite(seconds) || isNaN(seconds))
+    return say(0, "secondOne", "secondOther");
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  const parts = [];
+  if (h > 0)
+    parts.push(say(h, "hourOne", "hourOther"));
+  if (m > 0)
+    parts.push(say(m, "minuteOne", "minuteOther"));
+  if (sec > 0 || parts.length === 0)
+    parts.push(say(sec, "secondOne", "secondOther"));
+  return parts.join(", ");
+}
+function toISODuration2(seconds) {
+  if (!isFinite(seconds) || isNaN(seconds))
+    return "PT0S";
+  const s = Math.floor(seconds);
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const sec = s % 60;
+  let result = "PT";
+  if (h > 0)
+    result += `${h}H`;
+  if (m > 0)
+    result += `${m}M`;
+  if (sec > 0 || result === "PT")
+    result += `${sec}S`;
+  return result;
+}
+function resolvePlayer2(el) {
+  const forId = el.getAttribute("for");
+  if (forId) {
+    const target = document.getElementById(forId);
+    return target?.player ?? null;
+  }
+  const host = el.closest("video-player");
+  return host?.player ?? null;
+}
+
 // src/player.ts
 class Player2 {
   _el;
@@ -2040,6 +2687,7 @@ class Player2 {
   _cover = null;
   _coverDismissed = false;
   _coverTimer = null;
+  _playRequested = false;
   constructor(container, options = {}) {
     if (typeof container === "string") {
       const el = document.querySelector(container);
@@ -2080,8 +2728,8 @@ class Player2 {
     this._el.classList.add("ts-video-player");
     this._el.setAttribute("tabindex", "0");
     this._el.setAttribute("role", "region");
-    this._el.setAttribute("aria-roledescription", "video player");
-    this._el.setAttribute("aria-label", this._options.title || "Video player");
+    this._el.setAttribute("aria-roledescription", label(this._el, "videoRole"));
+    this._el.setAttribute("aria-label", this._options.title || label(this._el, "videoPlayer"));
     this._el.setAttribute("aria-keyshortcuts", "Space K M F I C ArrowLeft ArrowRight J L ArrowUp ArrowDown Home End 0 1 2 3 4 5 6 7 8 9");
     const mediaContainer = document.createElement("div");
     mediaContainer.className = "ts-video-player__container";
@@ -2105,27 +2753,43 @@ class Player2 {
     const cover = document.createElement("button");
     cover.type = "button";
     cover.className = "ts-video-player__cover";
-    cover.setAttribute("aria-label", `Play ${this._options.title || "video"}`);
+    cover.setAttribute("aria-label", this._options.title ? label(this._el, "playTitle", { title: this._options.title }) : label(this._el, "play"));
     cover.hidden = true;
     cover.style.cssText = "position:absolute;inset:0;z-index:2;display:none;align-items:center;justify-content:center;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:#000 center/cover no-repeat;cursor:pointer;-webkit-tap-highlight-color:transparent";
     const button = document.createElement("span");
     button.setAttribute("aria-hidden", "true");
     button.style.cssText = "display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,0.92);box-shadow:0 4px 18px rgba(0,0,0,0.35)";
     const triangle = document.createElement("span");
+    triangle.className = "ts-video-player__cover-play";
     triangle.style.cssText = "width:22px;height:24px;margin-left:5px;background:#0f172a;clip-path:polygon(0 0,100% 50%,0 100%)";
     button.appendChild(triangle);
     cover.appendChild(button);
     cover.addEventListener("click", (event) => {
       event.stopPropagation();
+      if (!cover.dataset.loading) {
+        cover.dataset.loading = "";
+        triangle.style.display = "none";
+        const ring = document.createElement("span");
+        ring.className = "ts-video-player__cover-spinner";
+        ring.style.cssText = "width:26px;height:26px;border-radius:50%;border:3px solid rgba(15,23,42,0.2);border-top-color:#0f172a";
+        button.appendChild(ring);
+        ring.animate?.([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], { duration: 800, iterations: Infinity });
+      }
       this.play().catch(() => {});
       if (this._coverTimer)
         clearTimeout(this._coverTimer);
-      this._coverTimer = setTimeout(() => {
-        if (this.state.started)
-          return;
-        this._coverDismissed = true;
-        this.updateCover(this.state);
-      }, 2000);
+      let waits = 0;
+      const settle = () => {
+        this._coverTimer = setTimeout(() => {
+          if (this.state.started)
+            return;
+          if (!this.state.canPlay && ++waits < 10)
+            return settle();
+          this._coverDismissed = true;
+          this.updateCover(this.state);
+        }, 2000);
+      };
+      settle();
     });
     this._el.appendChild(cover);
     this._cover = cover;
@@ -2145,6 +2809,13 @@ class Player2 {
       if (cover.style.backgroundImage !== background)
         cover.style.backgroundImage = background;
     }
+    if (!show && cover.dataset.loading !== undefined) {
+      delete cover.dataset.loading;
+      cover.querySelector(".ts-video-player__cover-spinner")?.remove();
+      const triangle = cover.querySelector(".ts-video-player__cover-play");
+      if (triangle)
+        triangle.style.display = "";
+    }
     cover.hidden = !show;
     cover.style.display = show ? "flex" : "none";
   }
@@ -2307,6 +2978,7 @@ class Player2 {
       return;
     }
     this._coverDismissed = false;
+    this._playRequested = !!this._options.autoplay;
     this._store.batch({
       sources,
       src: sources[0],
@@ -2364,6 +3036,10 @@ class Player2 {
           mediaType: loader.mediaType(candidate.src),
           providerType: loader.type
         });
+        if (this._playRequested) {
+          this._playRequested = false;
+          this.startRequestedPlay(this._provider);
+        }
         return;
       } catch (error) {
         lastError = error;
@@ -2409,12 +3085,12 @@ class Player2 {
     provider.on("play", () => {
       this._store.batch({ paused: false, ended: false });
       this._events.emit("play");
-      this.announce("Playing");
+      this.announce(label(this._el, "playing"));
     });
     provider.on("pause", () => {
       this._store.set("paused", true);
       this._events.emit("pause");
-      this.announce("Paused");
+      this.announce(label(this._el, "paused"));
     });
     provider.on("playing", () => {
       this._store.batch({ playing: true, started: true, waiting: false, playbackState: "playing" });
@@ -2444,9 +3120,9 @@ class Player2 {
       this._store.batch({ volume, muted });
       this._events.emit("volumechange", volume, muted);
       if (muted) {
-        this.announce("Muted");
+        this.announce(label(this._el, "muted"));
       } else {
-        this.announce(`Volume ${Math.round(volume * 100)}%`);
+        this.announce(label(this._el, "volumeLevel", { percent: Math.round(volume * 100) }));
       }
     });
     provider.on("ratechange", (rate) => {
@@ -2463,7 +3139,7 @@ class Player2 {
     provider.on("ended", () => {
       this._store.batch({ ended: true, playing: false, playbackState: "ended" });
       this._events.emit("ended");
-      this.announce("Playback ended");
+      this.announce(label(this._el, "ended"));
       if (this.state.loop) {
         this.seekTo(0);
         this.play();
@@ -2472,7 +3148,7 @@ class Player2 {
     provider.on("error", (error) => {
       this._store.batch({ loadingState: "error", error });
       this._events.emit("error", error);
-      this.announce(`Error: ${error.message}`);
+      this.announce(label(this._el, "errorMessage", { message: error.message }));
     });
     provider.on("statechange", (state) => {
       this._store.batch(state);
@@ -2485,7 +3161,7 @@ class Player2 {
     provider.on("fullscreenchange", (fullscreen) => {
       this._store.set("fullscreen", fullscreen);
       this._events.emit("fullscreenchange", fullscreen);
-      this.announce(fullscreen ? "Entered fullscreen" : "Exited fullscreen");
+      this.announce(label(this._el, fullscreen ? "enteredFullscreen" : "exitedFullscreen"));
     });
     provider.on("pipchange", (pip) => {
       this._store.set("pictureInPicture", pip);
@@ -2501,12 +3177,23 @@ class Player2 {
       this._events.emit("availabilitychange", feature, availability);
     });
   }
+  async startRequestedPlay(provider) {
+    await provider.play().catch(() => {});
+    if (this._provider !== provider || this.state.error?.code !== 1 || this.state.muted)
+      return;
+    this._store.set("error", null);
+    this.setMuted(true);
+    await provider.play().catch(() => {});
+  }
   async play() {
-    if (!this._provider)
+    if (!this._provider) {
+      this._playRequested = true;
       return;
+    }
     await this._provider.play();
   }
   pause() {
+    this._playRequested = false;
     this._provider?.pause();
   }
   togglePlay() {
@@ -2822,62 +3509,6 @@ class VideoPlayerElement2 extends HTMLElementBase {
     }
   }
 }
-// src/elements/utils.ts
-function formatTime2(seconds, guide = 0) {
-  if (!isFinite(seconds) || isNaN(seconds))
-    return "0:00";
-  const s = Math.floor(seconds);
-  const h = Math.floor(s / 3600);
-  const m = Math.floor(s % 3600 / 60);
-  const sec = s % 60;
-  const showHours = h > 0 || guide >= 3600;
-  if (showHours) {
-    return `${h}:${m.toString().padStart(2, "0")}:${sec.toString().padStart(2, "0")}`;
-  }
-  return `${m}:${sec.toString().padStart(2, "0")}`;
-}
-function formatTimePhrase2(seconds) {
-  if (!isFinite(seconds) || isNaN(seconds))
-    return "0 seconds";
-  const s = Math.floor(seconds);
-  const h = Math.floor(s / 3600);
-  const m = Math.floor(s % 3600 / 60);
-  const sec = s % 60;
-  const parts = [];
-  if (h > 0)
-    parts.push(`${h} ${h === 1 ? "hour" : "hours"}`);
-  if (m > 0)
-    parts.push(`${m} ${m === 1 ? "minute" : "minutes"}`);
-  if (sec > 0 || parts.length === 0)
-    parts.push(`${sec} ${sec === 1 ? "second" : "seconds"}`);
-  return parts.join(", ");
-}
-function toISODuration2(seconds) {
-  if (!isFinite(seconds) || isNaN(seconds))
-    return "PT0S";
-  const s = Math.floor(seconds);
-  const h = Math.floor(s / 3600);
-  const m = Math.floor(s % 3600 / 60);
-  const sec = s % 60;
-  let result = "PT";
-  if (h > 0)
-    result += `${h}H`;
-  if (m > 0)
-    result += `${m}M`;
-  if (sec > 0 || result === "PT")
-    result += `${sec}S`;
-  return result;
-}
-function resolvePlayer2(el) {
-  const forId = el.getAttribute("for");
-  if (forId) {
-    const target = document.getElementById(forId);
-    return target?.player ?? null;
-  }
-  const host = el.closest("video-player");
-  return host?.player ?? null;
-}
-
 // src/elements/video-skin.ts
 class VideoSkin2 extends HTMLElementBase {
   _cleanups = [];
@@ -2896,6 +3527,7 @@ class VideoSkin2 extends HTMLElementBase {
             color: white;
             font-family: system-ui, -apple-system, sans-serif;
             font-size: 14px;
+            container-type: inline-size;
           }
 
           /* Click-to-play overlay */
@@ -2923,6 +3555,25 @@ class VideoSkin2 extends HTMLElementBase {
             visibility: hidden;
           }
 
+          /* The time and the progress bar. One row with the buttons on a
+             wide player; a phone-width one gives the progress bar a row of
+             its own, where it would otherwise be squeezed to a dot between
+             the buttons. */
+          .center { display: contents; }
+          @container (max-width: 520px) {
+            .controls { flex-wrap: wrap; row-gap: 0; padding: 4px 10px 6px; }
+            .center { display: flex; order: -1; flex: 1 0 100%; align-items: center; gap: 10px; min-width: 0; font-size: 12px; }
+            /* Speed is in the settings menu too; one button fewer keeps the
+               rest on one row. */
+            ::slotted(media-playback-rate-button) { display: none; }
+          }
+
+          /* A touch screen sets the volume with its own buttons, and iOS
+             ignores a page's volume altogether: no slider there. */
+          @media (pointer: coarse) {
+            ::slotted(media-volume-slider) { display: none; }
+          }
+
           /* Spacer pushes right-aligned controls */
           .spacer {
             flex: 1;
@@ -2938,7 +3589,7 @@ class VideoSkin2 extends HTMLElementBase {
         </div>
         <div class="controls" part="controls">
           <slot name="left"></slot>
-          <slot name="center"></slot>
+          <div class="center" part="center"><slot name="center"></slot></div>
           <div class="spacer"></div>
           <slot name="right"></slot>
           <slot></slot>
@@ -2993,7 +3644,7 @@ class MediaPlayButton2 extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
         </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>
@@ -3019,7 +3670,7 @@ class MediaPlayButton2 extends HTMLElementBase {
     btn.addEventListener("click", this._onClick);
     const unsub = player.subscribe("paused", (state) => {
       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);
@@ -3054,7 +3705,7 @@ class MediaMuteButton2 extends HTMLElementBase {
           }
           button:hover { opacity: 0.8; }
         </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>
@@ -3075,7 +3726,7 @@ class MediaMuteButton2 extends HTMLElementBase {
     btn.addEventListener("click", () => player.toggleMute());
     const unsub = player.subscribe((state) => {
       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);
     });
@@ -3103,7 +3754,7 @@ class MediaFullscreenButton2 extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
         </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>
@@ -3131,7 +3782,7 @@ class MediaFullscreenButton2 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);
     });
@@ -3158,7 +3809,7 @@ class MediaPipButton2 extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           button:disabled { opacity: 0.4; cursor: not-allowed; }
         </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>
@@ -3185,6 +3836,7 @@ class MediaPipButton2 extends HTMLElementBase {
         this.removeAttribute("hidden");
       }
       btn.disabled = avail !== "available";
+      btn.setAttribute("aria-label", label(this, state.pictureInPicture ? "exitPiP" : "enterPiP"));
     });
     this._cleanup = unsub;
   }
@@ -3215,7 +3867,7 @@ class MediaTimeDisplay2 extends HTMLElementBase {
           time { color: inherit; }
           .separator { margin: 0 2px; }
         </style>
-        <time part="time" datetime="PT0S" aria-valuetext="0 seconds">0:00</time>
+        <time part="time" datetime="PT0S" aria-valuetext="${formatTimePhrase2(0, this)}">0:00</time>
       `;
     }
     this.addEventListener("click", this.handleClick);
@@ -3261,7 +3913,7 @@ class MediaTimeDisplay2 extends HTMLElementBase {
       timeEl.textContent = formatTime2(seconds, state.duration);
     }
     timeEl.setAttribute("datetime", toISODuration2(seconds));
-    timeEl.setAttribute("aria-valuetext", formatTimePhrase2(seconds));
+    timeEl.setAttribute("aria-valuetext", formatTimePhrase2(seconds, this));
   }
 }
 // src/elements/media-time-group.ts
@@ -3419,7 +4071,7 @@ class MediaProgressBar2 extends HTMLElementBase {
         </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>
@@ -3525,7 +4177,7 @@ class MediaProgressBar2 extends HTMLElementBase {
       fill.style.width = `${percent}%`;
       thumb.style.left = `${percent}%`;
       container.setAttribute("aria-valuenow", String(Math.round(percent)));
-      container.setAttribute("aria-valuetext", `${formatTimePhrase2(state.currentTime)} of ${formatTimePhrase2(duration)}`);
+      container.setAttribute("aria-valuetext", label(this, "timeOf", { current: formatTimePhrase2(state.currentTime, this), duration: formatTimePhrase2(duration, this) }));
       const bufferedPct = (state.bufferedAmount || 0) * 100;
       buffered.style.width = `${bufferedPct}%`;
     });
@@ -3567,7 +4219,7 @@ class MediaVolumeSlider2 extends HTMLElementBase {
         </style>
         <div class="container" part="container" role="slider"
           aria-valuemin="0" aria-valuemax="100" aria-valuenow="100"
-          aria-label="Volume" tabindex="0">
+          aria-label="${label(this, "volume")}" tabindex="0">
           <div class="track" part="track">
             <div class="fill" part="fill"></div>
             <div class="thumb" part="thumb"></div>
@@ -3762,7 +4414,7 @@ class MediaSettingsMenu2 extends HTMLElementBase {
           .back { font-weight: bold; border-bottom: 1px solid rgba(255,255,255,0.2); }
         </style>
         <button class="trigger" part="trigger" type="button"
-                aria-label="Settings" aria-haspopup="true" aria-expanded="false">
+                aria-label="${label(this, "settings")}" aria-haspopup="true" aria-expanded="false">
           <svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" part="icon">
             <path d="${GEAR_ICON}"/>
           </svg>
@@ -3874,35 +4526,35 @@ class MediaSettingsMenu2 extends HTMLElementBase {
   }
   renderMain(menu, player) {
     const state = player.state;
-    this.addItem(menu, `Speed: ${state.playbackRate}x`, () => {
+    this.addItem(menu, `${label(this, "speed")}: ${state.playbackRate}x`, () => {
       this._currentPanel = "speed";
       this.renderPanel();
     });
     if (state.qualities.length > 0) {
       const current = state.qualities.find((q) => q.selected);
-      const label = state.autoQuality ? "Auto" : current ? `${current.height}p` : "Auto";
-      this.addItem(menu, `Quality: ${label}`, () => {
+      const label2 = state.autoQuality ? label(this, "auto") : current ? `${current.height}p` : label(this, "auto");
+      this.addItem(menu, `${label(this, "quality")}: ${label2}`, () => {
         this._currentPanel = "quality";
         this.renderPanel();
       });
     }
     if (state.textTracks.length > 0) {
       const showing = state.textTracks.find((t) => t.mode === "showing");
-      this.addItem(menu, `Captions: ${showing?.label || "Off"}`, () => {
+      this.addItem(menu, `${label(this, "captions")}: ${showing?.label || label(this, "captionsOff")}`, () => {
         this._currentPanel = "captions";
         this.renderPanel();
       });
     }
     if (state.audioTracks.length > 1) {
       const selected = state.audioTracks.find((track) => track.selected);
-      this.addItem(menu, `Audio: ${selected?.label || "Default"}`, () => {
+      this.addItem(menu, `${label(this, "audio")}: ${selected?.label || label(this, "defaultTrack")}`, () => {
         this._currentPanel = "audio";
         this.renderPanel();
       });
     }
   }
   renderSpeed(menu, player) {
-    this.addItem(menu, "Back", () => {
+    this.addItem(menu, label(this, "back"), () => {
       this._currentPanel = "main";
       this.renderPanel();
     }, false, true);
@@ -3915,11 +4567,11 @@ class MediaSettingsMenu2 extends HTMLElementBase {
     }
   }
   renderQuality(menu, player) {
-    this.addItem(menu, "Back", () => {
+    this.addItem(menu, label(this, "back"), () => {
       this._currentPanel = "main";
       this.renderPanel();
     }, false, true);
-    this.addItem(menu, "Auto", () => {
+    this.addItem(menu, label(this, "auto"), () => {
       player.setQuality("auto");
       this.close();
     }, player.state.autoQuality);
@@ -3931,12 +4583,12 @@ class MediaSettingsMenu2 extends HTMLElementBase {
     }
   }
   renderCaptions(menu, player) {
-    this.addItem(menu, "Back", () => {
+    this.addItem(menu, label(this, "back"), () => {
       this._currentPanel = "main";
       this.renderPanel();
     }, false, true);
     const anyShowing = player.state.textTracks.some((t) => t.mode === "showing");
-    this.addItem(menu, "Off", () => {
+    this.addItem(menu, label(this, "captionsOff"), () => {
       for (const t of player.state.textTracks) {
         if (t.mode === "showing")
           player.setTextTrack(t.id, "disabled");
@@ -3953,12 +4605,12 @@ class MediaSettingsMenu2 extends HTMLElementBase {
     }
   }
   renderAudio(menu, player) {
-    this.addItem(menu, "Back", () => {
+    this.addItem(menu, label(this, "back"), () => {
       this._currentPanel = "main";
       this.renderPanel();
     }, false, true);
     for (const track of player.state.audioTracks) {
-      this.addItem(menu, track.label || track.language || "Audio track", () => {
+      this.addItem(menu, track.label || track.language || label(this, "audioTrack"), () => {
         player.setAudioTrack(track.id);
         this.close();
       }, track.selected);
@@ -4010,9 +4662,8 @@ class MediaSeekButton2 extends HTMLElementBase {
       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) => {
@@ -4036,7 +4687,7 @@ class MediaPlaybackRateButton2 extends HTMLElementBase {
           button:hover { opacity: .8; }
           button:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
         </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());
@@ -4066,7 +4717,7 @@ class MediaPlaybackRateButton2 extends HTMLElementBase {
     button.addEventListener("click", this.onClick);
     this.cleanup = player.subscribe("playbackRate", (state) => {
       button.textContent = `${state.playbackRate}x`;
-      button.setAttribute("aria-label", `Playback speed ${state.playbackRate}x`);
+      button.setAttribute("aria-label", label(this, "playbackRate", { rate: state.playbackRate }));
     });
   }
 }
@@ -4086,7 +4737,7 @@ class MediaAirplayButton2 extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-airplay-active-color, #38bdf8); }
         </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>
       `;
@@ -4145,7 +4796,7 @@ class MediaLiveButton2 extends HTMLElementBase {
           i { width: 8px; height: 8px; border-radius: 9999px; background: #ef4444; }
           :host(:not([at-live-edge])) button { opacity: 0.72; }
         </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());
@@ -4241,7 +4892,7 @@ class MediaRemotePlaybackButton2 extends HTMLElementBase {
           button:hover { opacity: 0.8; }
           :host([connected]) button { color: var(--media-remote-active-color, #38bdf8); }
         </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>
       `;
@@ -4344,4 +4995,4 @@ function registerElements2() {
   }
 }
 
-export { isMediaSessionSupported2, createMediaSession2, updateMetadata2, isOrientationLockSupported2, lockOrientation2, unlockOrientation2, BaseProvider2, isHTML5Source2, HTML5Provider2, html5Loader2, extractYouTubeId2, isYouTubeSource2, YouTubeProvider2, youtubeLoader2, extractVimeoId2, extractVimeoHash2, isVimeoSource2, VimeoProvider2, vimeoLoader2, isHLSSource2, isNativeHLSSupported2, HLSProvider2, hlsLoader2, isDASHSource2, DASHProvider2, dashLoader2, defaultLoaders2, findLoader2, detectMediaType2, getPreconnectHints2, Player2, createPlayer2, getPlayer2, VideoPlayerElement2, formatTime2, formatTimePhrase2, toISODuration2, resolvePlayer2, VideoSkin2, MediaPlayButton2, MediaMuteButton2, MediaFullscreenButton2, MediaPipButton2, MediaTimeDisplay2, MediaTimeGroup2, MediaTimeSeparator2, MediaPreviewTime2, MediaProgressBar2, MediaVolumeSlider2, computePosition2, applyPosition2, MediaSettingsMenu2, MediaSeekButton2, MediaPlaybackRateButton2, MediaAirplayButton2, MediaLiveButton2, MediaErrorDisplay2, MediaRemotePlaybackButton2, registerElements2 };
+export { isMediaSessionSupported2, createMediaSession2, updateMetadata2, isOrientationLockSupported2, lockOrientation2, unlockOrientation2, BaseProvider2, isHTML5Source2, HTML5Provider2, html5Loader2, extractYouTubeId2, isYouTubeSource2, YouTubeProvider2, youtubeLoader2, extractVimeoId2, extractVimeoHash2, isVimeoSource2, VimeoProvider2, vimeoLoader2, isHLSSource2, isNativeHLSSupported2, HLSProvider2, hlsLoader2, isDASHSource2, DASHProvider2, dashLoader2, defaultLoaders2, findLoader2, detectMediaType2, getPreconnectHints2, englishStrings2, spanishStrings2, frenchStrings2, germanStrings2, japaneseStrings2, chineseStrings2, defaultTranslations2, I18n2, createI18n2, getI18n2, setI18n2, t2, formatTime2, formatTimePhrase2, toISODuration2, resolvePlayer2, Player2, createPlayer2, getPlayer2, VideoPlayerElement2, VideoSkin2, MediaPlayButton2, MediaMuteButton2, MediaFullscreenButton2, MediaPipButton2, MediaTimeDisplay2, MediaTimeGroup2, MediaTimeSeparator2, MediaPreviewTime2, MediaProgressBar2, MediaVolumeSlider2, computePosition2, applyPosition2, MediaSettingsMenu2, MediaSeekButton2, MediaPlaybackRateButton2, MediaAirplayButton2, MediaLiveButton2, MediaErrorDisplay2, MediaRemotePlaybackButton2, registerElements2 };