横浜で目標達成に本気な
ホームページ制作会社

動画の埋め込みには<video>タグを使用するのが一般的です。
この<video>タグ内の動画を「自動再生（autoplay）」設定した際にはChromeやiPhoneでの表示にご注意を！動画がうまく自動再生できていない可能性があるかもしれません。

本日のブログでは、「Chrome／iPhoneで動画が自動再生されない！」とお悩みの方への解決方法をご紹介したいと思います。

まずは基本の<video>タグを確認しよう

<video src="sample.mp4" autoplay></video>

<video>に自動再生を指定するautoplay属性のみ追加した形。必要最低限の内容しか記述していません。 このタグを基準に、Chrome/iPhoneそれぞれの解決方法を順番に説明していきます。

Chromeで自動再生が効いてないときはここをチェック！

まずはChromeの場合は、前述のタグに“muted”属性を追加します。

<video src="sample.mp4" autoplay muted></video>　

Chromeでは、autoplayとmutedをセットで指定する必要があります。

なぜautoplayとmutedを一緒に指定しないといけないの？

一言でいうと「Google Chromeの仕様だから」なんです。
以前はmutedを設定しなくても音アリで動画を自動再生できていましたが、Chromeの仕様が「消音なら自動再生OK」に変わったためですね。
（この仕様変更は結構昔のお話なので割愛します）

サイトで動画を自動再生したい！という方はこの属性を忘れずに記述してくださいね。

iPhoneで自動再生できていない…！？そんな時はこれを追加してみましょう！

「PCで見たときはちゃんと再生できていたのに！？」と私もちょっと焦ったことがありました。

結論から申し上げますと、<video>タグに“playsinline”属性を追加すればOK。

<video src="sample.mp4" autoplay muted playsinline></video>　

“playsinline”属性ってどんな意味があるの？

“playsinline”属性は、「この<video>タグ内の動画をインラインで再生してください」という指示です。“playsinline”属性は、「この<video>タグ内の動画をインラインで再生してください」という指示です。

ほとんどの端末はこの“playsinline“を記述していなくても動画をインライン再生してくれます。 そのため、PCで確認した際には自動再生していた動画をいざiPhoneで確認してみたら動いていない…という現象に陥ってしまうというわけです。

iPhoneに関してはこの記述がないと自動再生が効かないため、“playsinline”属性の記述を忘れずに入れておきましょう。
今はレスポンシブ対応のサイトやWEBページのコーディングがほとんどだと思うので、常に入れておいていいんじゃないかとも思います。

その他属性について

最後に、<video>タグ属性について軽く触れておこうかなと思います。

loop属性：繰り返し再生

<video src="sample.mp4" autoplay muted loop></video>　

自動再生と合わせて繰り返し再生させたいという場合に使用します
autoplay属性と合わせて指定する機会も多いです。

poster属性：動画の内容のヒントになる画像を指定

<video src="sample.mp4" poster="firstframe.jpg"></video>　

動画の再生ができない環境のブラウザなどに対して、動画の代わりに表示するもの。
「この動画はこんな内容です」と伝わるような画像を表示できます。サムネイルみたいな感じですね。

controls属性：動画再生のインタフェースを表示

<video src="sample.mp4" controls></video>　

動画のシークバーを表示できます。 動画の内容的に、一時停止や巻き戻し機能等があった方がいいなというときはこちらを指定しましょう。

width属性、height属性：動画のサイズを指定

<video src="sample.mp4" width="1080" height="720"></video>　

レスポンシブデザインのコーディングが多いので、個人的にはここに直接指定するよりもcssでサイズ調整をすることが多いですが一応ご紹介。

余談ですが、<video>タグのほか<iframe>内の動画などをレスポンシブデザインで動画を表示する際はデバイスサイズに合わせて動画の縦横比を維持する形でコーディングするのがいいと思います。

アスペクト比を維持したままレスポンシブページに動画を表示する方法についても、いずれブログで解説できたらなと思います。

まとめ

一見簡単な内容ですが、うっかり忘れているとちょっとびっくりしそうな事象。
Chromeの仕様やiPhoneの仕様を踏まえて覚えておきたいポイントですね。