JavaScript・PHP・Vue.jsのサンプルやWordPressのテーマ・無料フォント、ブログの運営方法等の紹介

iPhone等のスマホで<video>タグの動画が表示されない場合の対処法

この記事を簡単に書くと…

  • iPhoneやiPadで<video>タグで埋め込んだ動画が表示されない
  • <video>タグで埋め込んだ動画がスマホで自動再生されない
  • <video>タグに「playsinline autoplay muted」属性を入れることで解消
ブログランキング・にほんブログ村へ

iPhone等のスマホで<video>タグの動画が表示されない場合の対処法

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」を入れましょう。

この記事をSNSでシェアする

関連記事

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

Follow us on Twitter Subscribe RSS Follow us in feedly
NATURAL PRESS

このサイトについて

JavaScript・PHP・Vue.jsのサンプルや参考リンク、WEBサイト(ホームページ)で使えるアイコンや写真等の素材をダウンロード出来ます。

他にも、無料で使えるブロガーやアフィリエイター向けの、WordPressマガジンテーマ「NATURAL PRESS」を公開しています。ダウンロードや更新情報は、こちらのサイトで公開しています。

また、「WEB上手」は全ページリンクフリーですのでご自由にリンクしていただけます。リンクしていただけますと嬉しいです。

WordPress Theme NATURAL PRESS by WEB-JOZU.com