Androidのvideoタグでプレビューを簡単に表示する方法

以下、Vue.jsを前提にコード載せていますので、bindされている部分などは適宜読み替えてください。

Safari,iPhoneの場合

#t=〇〇を使う

こんな感じ。

<video controls="true" playsinline >
  <!-- t=0だとプレビュー画像が表示されないので0.1秒の部分をプレビューとして指定 -->
  <source v-if="src" :src="src+'#t=0.1'" />
     あなたのブラウザでは動画の再生がサポートされていません。
</video>

少し謎な部分としては、t=0にするとプレビューが表示されずに真っ黒でした。
理由わかる人いたら教えてください。

また、自動再生する場合には autoplay="true" muted を付け加えればOK
iOS11ではmutedを指定しなければ自動再生はされません。

Androidの場合

上記と同じ指定だと、真っ黒なまま。たまにキャッシュが効いてか表示されることはあるものの、基本、表示されない。

load()関数を使う

vue.jsを使っているのでライフサイクルのmountedでvideoタグのobjectを取得してload()を呼び出しています。Domが取得できるタイミングであれば、他のタイミングでも可能だと思います。

mounted() {
  const videoObj = document.getElementsByTagName("video");
  if (videoObj && videoObj[0]) {
    videoObj[0].load();
  }
}

まとめ

とりあえず上記の二つで、iOSでもAndroidでもChromeでもSafariでもプレビューがでるvideoタグを書くことができました。何かの参考になれば幸いです。（IEは知りません。。。）