動画パフォーマンス指標と最適化（LCP/INP/帯域/CPU）

// LCP 候補種別
new PerformanceObserver(list => {
  for (const e of list.getEntries()) {
    const el = (e as any).element as HTMLElement | null;
    window.__rum?.queue({ t: 'lcp', ms: e.renderTime || e.loadTime, tag: el?.tagName?.toLowerCase() });
  }
}).observe({ type: 'largest-contentful-paint', buffered: true });

// 再生開始遅延
const video = document.querySelector<HTMLVideoElement>('video[data-rum]');
let clickTs: number | undefined;
video?.addEventListener('pointerdown', () => clickTs = performance.now(), { once: true });
video?.addEventListener('playing', () => clickTs && window.__rum?.queue({ t: 'playDelay', ms: performance.now() - clickTs }));

// Dropped Frames 粗推定
if (video && 'requestVideoFrameCallback' in HTMLVideoElement.prototype) {
  let expected = 0, actual = 0, last: DOMHighResTimeStamp | undefined;
  const targetFps = 30;
  const loop = (now: number) => {
    if (last) { const delta = now - last; expected += delta / (1000 / targetFps); actual += 1; }
    last = now; video.requestVideoFrameCallback(loop);
  };
  video.requestVideoFrameCallback(loop);
  setInterval(() => {
    const drop = Math.max(0, expected - actual);
    window.__rum?.queue({ t: 'dropRate', value: drop / Math.max(1, expected) });
  }, 5000);
}