はじめに
動画をWebページや、Webアプリケーションの先頭において自動再生させてリッチに見せるような場面は数多くあるかと思います。iPhoneでは動画が再生される前の読み込み状態の時に何か表示されるということはないのですが、Android端末で見ると灰色の再生ボタンのようなものが表示される場合があります。
その解決法を説明していきます。
-- 読み込み中の動画 --
iPhone ：特に何も表示されない
Android：灰色の再生ボタンが表示される
結論
動画が再生可能な状態になるまで動画をvisibilityまたはopacityで非表示にして、再生可能になったことを検知したら動画を表示すれば良いだけです。
私はVue.jsで開発することが多いのでv-showを用います。
display: none;やv-ifなどで切り替えない理由が表示する時のガタ付きはないほうがいいと考えているためです。プロジェクトに合わせて正しく使い分けましょう！
そのための手順を説明していきます。
再生可能な状態を検知して表示する方法
Vue.jsの場合
<script setup lang="ts">
import { ref } from 'vue';
const isVideoLoaded = ref<boolean>(false);
// ビデオが読み込み可能になったときに呼ばれる関数
const onVideoLoaded = () => {
isVideoLoaded.value = true;
};
</script>
<template>
<div>
<video
v-show="isVideoLoaded"
@loadeddata="onVideoLoaded"
autoplay
muted
playsinline
>
<source src="your-video-file.mp4" type="video/mp4" />
</video>
<!-- ビデオが読み込まれるまで何か表示する場合 -->
<p v-if="!isVideoLoaded">Loading video...</p>
</div>
</template>
説明
loadeddataイベントがvideoタグの動画が読み込み完了したかを検知してくれます。
loadeddataイベントが発火すると、トリガーとなるisVideoLoadedがtrueとなって動画が表示されます。逆に読み込み中に表示しておきたい文言やなどは消えます。
Vanilla JSの場合（HTML）
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
/* 動画を初期状態で非表示にする */
#video {
visibility: hidden;
}
</style>
</head>
<body>
<div>
<video
id="video"
autoplay
muted
playsinline
>
<source src="your-video-file.mp4" type="video/mp4">
</video>
<!-- ビデオが読み込まれるまで表示するメッセージ -->
<p id="loadingMessage">Loading video...</p>
</div>
<script>
const video = document.getElementById('video');
const loadingMessage = document.getElementById('loadingMessage');
// ビデオが再生可能になったときの処理
video.addEventListener('loadeddata', () => {
// 動画を表示してメッセージを非表示にする
video.style.visibility = 'visible'; // visibilityを変更
loadingMessage.style.display = 'none'; // メッセージを非表示に
});
</script>
</body>
</html>
説明
Vue.jsのコードと同様に、loadeddataイベントがvideoタグの動画が読み込み完了したかを検知してくれます。
Vue.jsと異なる点は、loadeddataイベントが発火すると、直接各要素のCSSを変更し見えるようにしたり、見えなくしたりします。同時にさまざまな要素に対して表示非表示を切り替えたい場合はclassListを使用してclassのつけ外しで実装しても良いかと思います。
最後に
通信の遅い環境で、Androidで見るという状況で起こってしまい発覚した本件ですが、特定の端末や環境ばかりでテストせずに網羅的に色んな環境で確認を行うのは改めてとても大事だなと感じました。細かい部分を妥協せずに全てのユーザーにとってユーザー体験の良いページを作れるように細かい部分でクオリティーを上げていきます！
同じ問題で困っている人の助けになれば幸いです！
失礼します🙇♂️