HTML５動画：読込完了したら再生したい

問題

HTML動画（短尺）

• 途中から再生
• スムーズに再生、シーク

のニーズがあるたくて、読込完了してから再生したくで、その調べた方法を簡単にまとめます。

方法

いろんな方法がありますが、ObjectURLが一番良さそうと思っています：

① ajaxで動画のBlobをダウンロード
② BlobからObjectURLを作成
③ 作成したObjectURLをに渡す

サンプルコード

AxiosとVueを使っていますが、ロジックが通用できます。

<template>
   <div v-if="blobUrl">
    <video muted autoplay controls >
      <source  v-bind:src="blobUrl" type="video/mp4" />
    </video>
  </div>
  <div v-else>
    loading...
  </div>
</template>

<script>

...
data: function () {
  return {
    blobUrl: null,
  }
},
created() {
  axios.get(this.videoUrl), {
    responseType: 'blob',
    timeout: 100000,
  }).then(response => {
    const blob = response.data;
    this.blobUrl = URL.createObjectURL(blob);
  });
}

...
</script>