memo

Safari において、 DOMParser から生成した video タグを body に追加するとさまざまな不具合に遭遇する。

• HTML 5 video doesn't show up in Safari when rendered via DOMParser (rendering via innerHTML is working fine) - Stack Overflow
  • DOMParser で生成した video タグを追加すると動画が表示されない
• Bug 222657 - Media element never populates its UA shadow if it was initially created in a document without browsing context
  • DOMParser で生成した video タグにコントロールが表示されない

これをなんとか解決できないかと、いくつかのコードを書いて試してみた。

• sasaplus1-prototype/clone-video-element-from-dom-parser
  • playground

上記ではなんとか Safari にて正常に動作させることができた。ただ、アプリ内の WebView では動画の問題は解決できたものの、コントロールの問題は解決できていなかった。

さらに試して以下のようなコードであれば、動画とコントロールの両方を表示できた。

// この時点でDOMParserから生成されたvideoタグが既にbodyに追加されているものとする

const videos = document.querySelectorAll('video');

if (videos.length <= 0) {
  return;
}

type HTMLVideoElementEx = HTMLVideoElement & {
  [key: string]: string | boolean;
};

for (const video of videos) {
  const videoElement = document.createElement('video') as HTMLVideoElementEx;

  // HACK: videoタグの生成直後に追加するとコントロールが正常に描画される
  document.body.appendChild(videoElement);

  const attributes = video.attributes;

  for (const attribute of attributes) {
    const { name, value } = attribute;

    if (name in videoElement) {
      videoElement[name] =
        typeof videoElement[name] === 'boolean' ? true : value;
    } else {
      videoElement.setAttribute(name, value);
    }
  }

  videoElement.append(...video.childNodes);
  video.replaceWith(videoElement);
}

こんなワークアラウンドを実行したくはないが、 Safari が修正されるまでは仕方がない。