株式会社シーエムエー

053-459-1510

CMA BLOG

株式会社シーエムエー ホーム > CMA BLOG > ホームページ制作 > Google Chromeで動画が再生されない

ホームページ制作 Google Chromeで動画が再生されない

  • このエントリーをはてなブックマークに追加

皆様こんにちは。デザイン部の坂本です。

弊社のトップページにあるメインビジュアルの動画が、いつの間にか再生されなくなったので調査をしました。
原因が判明し修正を加えたところ、無事動画が再生するようになりましたのでその方法をご紹介します。

動画が再生されない症状

Google Chromeでアクセスすると動画が自動再生されないもしくは表示がおかしくなる。
ページをリロードしたり他のページから遷移した場合は問題なく再生される。

■弊社のトップページも動画が自動再生されなくなった。(※現在は再生されます)
https://www.akindo2000.net/

動画が再生されない原因

Google Chromeのバージョン66では音声付きメディアの自動再生が制限されるように仕様が変更された。

バージョンの確認方法

右上の「メニュー」→「ヘルプ」→「Google Chromeについて」で確認できます。

修正方法

videoタグに「muted属性」を付与してください。

<video id="player1" width="100%" height="400px" preload="none" autoplay loop muted >
<source src="movie.mp4" type="video/mp4" />
</video>

muted 属性…ミュートした状態で再生します。

youtubeをiframeで埋め込んでいる場合

iframeのパラメータではミュート設定できないため、APIでの記述を書き直してミュートに設定する必要があります。

まとめ

いかがでしたか?
ブラウザの仕様変更で不具合が発生することもあります。
トップページに動画を使っているサイトも多いため、すぐに対処できるようにしましょう!

人気の記事ランキング

  • posted on 2018/07/05まだ間に合う!? 7月16日以降もGoogle Maps APIの地図を無料で使い続ける方法とは?

  • posted on 2018/05/23Google Chromeで動画が再生されない

  • posted on 2018/04/11構造化マークアップはSEO対策に効果があるのかやってみた

  • posted on 2018/05/30HTML5広告でクリック率が3.1倍にUP!

  • posted on 2018/09/05Zapierを使ってブログとSNS(Twitter・Facebook)を自動連携!トラフィック増大でSEO対策も

Top