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」を入れましょう。
関連記事
こちらの記事も読まれています
音量アイコンが反応しない場合の対処法(Windows 10)...(10.2k view)
【詐欺メールに注意】お客様のAmazonプライム会員資格は、2019/...(4.3k view)
「ヒラギノ角ゴ」にソックリ!無料で使えるOpen Type フォント「...(3.8k view)
Windows10で複合機のスキャンができなくなった時の対処法...(2.1k view)
プリンターの状態が「要確認」と表示されて印刷できない場合の復旧方法...(1.9k view)
Windowsで「更新してシャットダウン」が消えない場合の対処法...(1.4k view)
「【楽天】パスワード初期化のご連絡」は本物?見分け方と対処法...(1k view)
Android スマホで明朝体を表示させたい場合の対処法...(895 view)
DELL Windows10搭載 PCのリカバリディスク(メディア)を...(744 view)
「東京電力からのご案内」のSMSは詐欺メールではなかった!...(694 view)
コメントする