エムタメ!について facebook twitter

マーケティング担当者のために
マーケティングに関わるためになる情報をためていく

MoviePrint
TOP > コラム > 最新版Chromeではサイトに埋め込んだ動画が自動再生されません

最新版Chromeではサイトに埋め込んだ動画が自動再生されません

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/05/25
最新版Chromeではサイトに埋め込んだ動画が自動再生されません

最新版のGoogleChromeを利用すると、サイトに埋め込んだ動画が再生されない事象を確認しました。
他ブラウザでは通常再生しGoogleChromeのみ再生がされない場合は、この記事にまとめている対策を試してみてください。

1.GoogleChromeで動画再生ができない事象

最新版のGoogleChromeを利用してサイト内にある動画を見ようとすると、従来、自動再生されていた動画が再生されず、静止画のように止まったままになる現象を確認しました。

Internet ExplorerやFireFoxなどの他ブラウザでは同様の事象は発生せず、最新版のGoogleChromeに限った話の模様です。 GoogleChromeのバージョンアップ情報を参照していくと、どうやら、今回のバージョンアップが「動画の自動再生無効化」を中心に実装された機能な模様なので、仕様設計ミスという訳ではなさそうです。

・Chrome最新バージョン、ついに「オートミュート」機能を搭載

サイトに埋め込んだ動画(Youtubeも含む)には、ミュート属性を設定しておかないと自動再生されない状況なので、事象を確認したら以下手順にて回避するようにしましょう。

2.サンプル

実際に、動画ファイルを埋め込んでみました。
自動再生されるものは、ミュート属性を設定しているものなります。

videoタグでの再生(左:ミュート属性無  右:ミュート属性有)

再生可否の差は、videoタグにmuted属性を書いているかどうかとなります。 これは音声を持っていない動画に対しても同様なため、サイト内に動画を利用している場合には、muted属性の記述の有無を確認するようにしましょう。

3.原因について

原因は、GoogleChromeの仕様に依存した問題となります。
上述した通り、サイトに挿入した動画に対して、muted属性を付与することで問題は回避できますので、実施されてない方は早めに対策を施しましょう。

4.対処法について

サイトに埋め込み際に、muted属性を付与することで、従来のような自動再生が可能になります。 動画挿入時は以下ソース参考に、埋め込んでみて下さい。

videoタグによる埋め込みコード

<video autoplay loop muted controls src="/dcms_media/other/sample0525.mp4" width="300"></video>

ソース上に muted を記述することで、最新版Chromeでも従来のように自動再生されるようになります。

Chromeの仕様修正を期待したいですが、「動画の自動再生無効化」をメインにしたバージョンアップとなるので、しばらくこの仕様が続くかと思います。サイトに動画挿入をしている方は注意しましょう。

無料資料ダウンロード

BtoBマーケティングハンドブック 表紙

BtoBマーケティングハンドブック

無料ダウンロード

展示会の効果を最大化させる12の手法 表紙

展示会の効果を最大化させる12の手法

無料ダウンロード

関連キーワード

おすすめ

エムタメ!ニュース

デジタルマーケティングについての
最新情報やお役立ち資料を自動受信

登録する(無料)

Follow us!

twitter hatena google Eight rss follow us in feedly

特集

WEBリニューアル物語

WEB制作のよくある失敗に全て引っ掛かるけど憎めない青木の奮闘記

はじめての展示会物語
メールマーケティング