Chromeで動画が再生されない

Webサイト制作で困ったのでまとめました。

最近のWebサイトに多い、TOPページのメインビジュアルで動画が自動再生するものを実装しようとしましたが、再生されませんでした。 JSで再生しようとしても再生されませんでした。

解決方法

検索したところvideoタグにmuted属性をつけることで自動再生可能になることでした。
muted、消音状態じゃないと勝手に音声を流しては行けないというユーザーに優しい対応のようですね。

muted 属性を使用した例

<video muted autoplay loop preload="none"></video>

参考サイト

• Google Chromeで動画が再生されない
• モバイルブラウザのビデオ再生がいろいろ変わるので確かめてみた

まとめ

以上になります。
動画や音声は、ブラウザの仕様の変化を受けやすいですね。

お困りの方のお役に立てば幸いです。
読んでいただき、ありがとうございました。