video.svg

img要素に与えたときはサムネイル画像を出せて、object要素の場合は動画を再生できるSVG画像。 SVG画像をimg要素で表示したときforeignObject内の外部リソースが読み込まれない仕様を利用した。
動画は https://developer.mozilla.org/ja/docs/Web/HTML/Element/video の flower.webm を拝借しました。

video.svg code

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="500" height="282" viewBox="0 0 500 282">
  <foreignObject x="0" y="0" width="100%" height="100%">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <style type="text/css">
        .video-container, img.thumbnail {
          position: absolute;
          left: 0;
          top: 0;
        }
        video {
          z-index: 100;
        }
        img.thumbnail {
          z-index: 200;
        }
      </style>
      <div class="video-container">
        <img
          class="thumbnail"
          width="500"
          height="282"
          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA..." />
        <video
          controls="true"
          width="500"
          height="282"
          src="https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm"
          onloadeddata="(() => { var t = document.querySelector('.thumbnail'); t.remove(); })()">
        </video>
      </div>
    </html>
  </foreignObject>
</svg>

img要素で表示

あらかじめ定めた動画サムネイル画像が前面に表示される。なお、背面のvideo要素では動画の読み込みに失敗している。

object要素で表示

動画の最初のフレーム読み込み完了イベント (loadeddata) 発火時にオーバレイしているサムネイル画像 (img要素) を動的に削除して、背面に隠れていた動画 (video要素) が表示される。

video.svg

video.svg code

img要素で表示

object要素で表示

関連