エムタメ!について facebook twitter

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

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2018/05/25

最新版の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 rss follow us in feedly

特集

WEBリニューアル物語

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

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