html5 videoタグの重い動画をJSを使って遅延ロードする方法【自動再生 iOS動作確認済】

どうも、こうへいです。

今回の記事は、Javascript Tips!! ってことで、タイトル通りですが、HTML5のvideoタグに重い動画ファイルを読み込む際に、Javascriptを使って遅延ロードする方法です。

自動再生 & iOS12で動作確認しました。

コードはこんな感じ。

実装

<!-- まずはvideoタグを設置 -->
<video id="video" muted webkit-playsinline playsinline loop autoplay></video>

<!-- js実装 -->
<script>
function lazyLoadVideo () {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://mameko.jp/lazymov.mp4', true);
    xhr.responseType = 'blob';
    xhr.onload = function (e) {
      if (this.status === 200) {
        // ロード完了
        var blob = this.response;
        var src = (window.webkitURL || window.URL).createObjectURL(blob);
        $('#video').append('<source type="video/mp4" src="' + src + '">');
      }
    };
    xhr.send();
  }
  // 実行
  lazyLoadVideo();
</script>

解説

jsで動画ファイル読み込んでからblob作って、sourceタグのsrcに突っ込んでからDOMに追加する。

以上！お試しあれ〜