【iPhone/Safari対策済み】WEBサイトにMP4動画を設置する方法
最近のWEBサイトはファーストビューや背景に動画が設置されていることが多いです。
今回はmp4形式の動画を設置した際に、iPhoneで自動再生できない、SPとPCでの出し分け、複数形式設置など、
実装の際に詰まりやすいポイントをまとめました。
目次
基本のコード（iPhone/Safari対策済み）
HTML
<video class="movie" autoplay muted loop playsinline webkit-playsinline preload="auto">
<source src="./images/movie.mp4" type="video/mp4">
</video>autoplay：ページ読み込みと同時に再生
loop：動画を繰り返し再生
muted：音声なし（自動再生する場合、ブラウザによってはミュート必須）
playsinline
webkit-playsinline（iOS向け保険）
type="video/mp4"：動画の形式
iPhone Safari で自動再生させる必須条件
- muted が付いている
- autoplay が付いている
- playsinline / webkit-playsinline が付いている（これがないとiPhoneは「全画面再生前提」扱いになって autoplay が無効化されます。）
CSS
CSSで高さ・横幅を指定します。
以下はファーストビューのような大画面の時の設定です。
.movie {
width: 100%;
height: 100%;
object-fit: cover;
}Javascript
document.addEventListener('DOMContentLoaded', () => {
const video = document.querySelector('.movie');
if(video){
video.muted = true;
video.play().catch(() => {
// 自動再生失敗したらユーザー操作で再生
document.addEventListener('touchstart', () => {
video.play();
}, { once: true });
});
}
});動画の上に透明色背景などのフィルターをかけたい場合
疑似要素でフィルターをかける方法が一番簡単です。
例えば、上に乗せるロゴや文字を目立たせるために、青色の透明背景を上から重ねたい場合は以下のように書きます。
HTML
<div class="movie-wrap">
<video class="movie" autoplay muted loop playsinline webkit-playsinline preload="auto">
<source src="./images/movie.mp4" type="video/mp4">
</video>
</div>videoタグをdivで囲みます。
CSS
.movie-wrap {
position: relative;
overflow: hidden;
}
.movie-wrap .movie {
width: 100%;
height: 100%;
object-fit: cover;
}
/* フィルター */
.movie-wrap::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 50, 100, 0.3); /* 例：透明青背景を重ねる */
pointer-events: none;
}囲んだdivに::afterを使って透明色背景を上から重ねています。
PCとスマホで別の動画を出し分けたい場合
2つ設置してCSSで出し分ける方法 と、HTMLで読み分ける方法があります。
今回はHTMLで読み分ける方法を紹介します。
動画も画像と同じようにsource + media 属性で画面幅で読み分けることが出来ます。
<video class="movie" autoplay muted loop playsinline webkit-playsinline preload="auto">
<source
src="./images/pc_movie.mp4"
media="(min-width: 768px)"
type="video/mp4"
>
<source
src="./images/sp_movie.mp4"
media="(max-width: 767px)"
type="video/mp4"
>
</video>複数形式の動画を設置したい場合
<video class="movie" autoplay muted loop playsinline webkit-playsinline preload="auto"
<source src="./images/movie.mp4" type="video/mp4">
<source src="./images/movie.webm" type="video/webm">
お使いのブラウザは動画タグに対応していません。
</video>互換性向上のため、MP4以外にもWebMやOGGを用意すると、古いブラウザでも再生できる可能性が高くなります。
タグ内のテキストは、動画が再生できない場合に表示されます。