Vue.jsで<video>タグを使用する際に、サムネイルが表示されない場合の対処法についてまとめました。特に、src="url#t=0.1"のようにクエリパラメータを追加することで解決する方法を紹介します。

Vue.jsの<video>タグでサムネイルが表示されないときの対処法

🔍 問題

Vue.jsで<video>タグを使用して動画を表示しようとすると、以下の問題が発生することがあります。

• 動画のサムネイル（ポスター画像）が表示されない
• poster属性を指定しても機能しない
• controlsを付けても、最初のフレームが表示されない

✅ 解決策1：#t=0.1をURLに追加する

ブラウザによっては、動画の最初のフレームを読み込む際にサムネイルをうまく表示できない場合があります。この問題を回避するために、動画のURLに #t=0.1を追加すると解決することがあります。

<template>
  <video :src="videoSrc" controls></video>
</template>

<script setup>
import { ref } from 'vue';

const videoSrc = ref('https://example.com/sample.mp4#t=0.1');
</script>

📌 なぜ#t=0.1が有効なのか？

#t=0.1は動画の開始位置を0.1秒に設定するURLフラグメントです。
この指定をすると、ブラウザが最初のフレームではなく、0.1秒後のフレームを読み込もうとするため、サムネイルが正しく表示されることが多いです。

✅ 解決策2：preload="metadata"を指定する

<video>タグに preload="metadata"を指定すると、動画のメタデータ（サムネイルを含む）が適切に読み込まれやすくなります。

<template>
  <video :src="videoSrc" controls preload="metadata"></video>
</template>

✅ 解決策3：poster属性を手動で設定する

サムネイルを確実に表示させたい場合、poster属性を使って静的な画像を指定するのも有効です。

<template>
  <video :src="videoSrc" controls poster="https://example.com/sample-thumbnail.jpg"></video>
</template>

📝 まとめ

サムネイルが表示されない問題が発生した場合は、上記の方法を試してみてください！🚀