iPhone等のスマホで<video>タグの動画が表示されない場合の対処法
- トラブル
- 投稿者：WEB上手 ｜ 2020年6月7日
この記事を簡単に書くと…
- iPhoneやiPadで<video>タグで埋め込んだ動画が表示されない
- <video>タグで埋め込んだ動画がスマホで自動再生されない
- <video>タグに「playsinline autoplay muted」属性を入れることで解消
HTML5では<video>タグを使うことで、WEBサイトに動画を埋め込むことが出来ます。ただ、記述方法に気を付けないと、WindowsやAndroidスマホでは表示されても、iPhoneやiPadなどでは動画が表示されない、という現象が発生してしまいます。
日本では、スマホでのiPhoneのシェアはかなりのものになりますので、iPhoneやiPadで意図せずに動画が表示されないのは困りますよね。そんなわけで、<video>タグの動画が表示されない時の対処法になります。
動画の形式はmp4がおすすめ
まず、<video>タグで埋め込む動画の形式は「mp4」が良いかと思います。というのもGoogle ChromeやEdge、FirefoxやSafariといった主要ブラウザのほとんどが、mp4の動画形式に対応しているからです。
またmp4は高圧縮で動画を保存できるので、ファイルの容量を抑えつつ、WEBサイトに埋め込むのに適しています。
iPhoneやiPadにはplaysinline 属性が必須
<video>タグで動画を表示させる際には以下のように記述します。
<video playsinline autoplay muted loop>
<source src=”movie.mp4″>
</video>
playsinline：動画をインラインで再生するように指定
autoplay：動画を自動再生させる
muted：動画の音を消音にする
loop：動画を自動再生させる
スマホで動画を自動再生させるには、「autoplay」と「muted」属性が必須になります。またiPhoneやiPadで動画が表示させる為には「playsinline」属性が必須になります。つまり、スマホで動画を自動再生させたい場合には「playsinline autoplay muted」属性を入れる必要があります。
まとめ
スマホでは、動画の扱いが色々と異なっているので注意が必要ですね。スマホで動画が自動再生されない場合にはvideoタグに「autoplay」と「muted」を入れましょう。iPhoneやiPadで動画が表示されない場合にはvideoタグに「playsinline」を入れましょう。
関連記事
こちらの記事も読まれています
「ヒラギノ角ゴ」にソックリ！無料で使えるOpen Type フォント「...（3.3k view）
音量アイコンが反応しない場合の対処法（Windows 10）（3.2k view）
プリンターの状態が「要確認」と表示されて印刷できない場合の復旧方法（2.2k view）
iPhone等のスマホで<video>タグの動画が表示され...（825 view）
「光回線受付センター」はNTTではないので注意！光コラボとは？（765 view）
MW WP Formでメールが届かない・送信されない場合の対処法（677 view）
【詐欺メールに注意】お客様のAmazonプライム会員資格は、2019/...（671 view）
J:COM（ジェイコム）の無料メールアドレスの追加設定方法（640 view）
Windowsで「更新してシャットダウン」が消えない場合の対処法（612 view）
迷惑メール？「MAILER-DAEMON」から大量にメールが届く場合は...（521 view）
コメントする
ずっと困ってたことが5分で解決できました。
あざーす！
コメントいただきましてありがとうございます。
無事に解決出来たようで良かったです！