【エラー解決】WEBサイトに埋め込んだ動画が自動再生されない時の解決方法
WEBサイトのメインビジュアルを動画にしているサイトは多くあります。
自分でも同様にメインビジュアルを動画にして設置した際、PCでは再生するけど、iPhoneで自動再生されないという場面に出くわしたことがありました。
今回の記事ではこの時実際に対応した解決方法をご紹介したいと思います。
PCで自動再生させる為に必要なvideoタグの必須属性
まずPCの場合は以下の設定でWEBサイトに埋め込んだ動画を自動再生することが出来ます。
<video src="mainvisual.mp4" autoplay muted></video>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
それぞれの属性は以下のような設定です。autoplay属性は自動再生させるための属性です。また、muted属性は音の出ないようにする属性です。
PCで自動再生させるには最低限この２つの属性を指定する必要があります。muted属性を指定する必要があるため、音声を出したまま動画を自動再生させることは出来ません。
iPhoneで自動再生させる為に必要なvideoタグの必須属性
iPhoneでは先ほど紹介した記述だけでは自動再生されません。
iPhoneでWEBサイトに埋め込んだ動画を自動再生させる為には以下のような記述に記述します。
<video src="mainvisual.mp4" autoplay muted playsinline></video>See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
先ほどのautoplay属性、muted属性の他、playsinline属性を指定する必要があります。
このplaysinline属性は動画をインライン再生させるための指定です。
iPhoneで動画を再生しようとすると全画面モードで再生されるのを見たことがあるかもしれません。
このような再生方法ではなく、ページ内に埋め込まれた状態のまま再生させるための属性がplaysinline属性です。
videoタグに関する関連記事
videoタグに関する記事は他にもご紹介しています。
まとめ
PCでは正しく自動再生されるのにiPhoneだけうまく自動再生されない。
このような閲覧環境による違いは知っていれば何てことないことでも知らないと焦ってしまいますね。
今回はWEBサイトに埋め込んだ動画がiPhoneでは自動再生されない場合の解決方法のご紹介でした。
