静岡・浜松のWebマーケティング|株式会社シーエムエー

お問い合わせ

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 2023/02/082023年度版 Google PageSpeed Insights(ページスピードインサイト)を使って読み込み速度を改善したら、何点になるのかチャレンジしてみた

  • posted on 2023/12/07迫る、浜松市の行政区再編(中央区、浜名区)。住所変更だけじゃない。Webサイトで必要な対応とは?

  • posted on 2022/04/21WordPressで画像をWebP(ウェッピー)に対応する方法

  • posted on 2022/10/21DockerでPHP環境を簡単に構築してみよう

  • posted on 2021/02/10インスタグラムが突然表示されなくなった!最新のInstagram Graph API(v9.0)を使って再表示する方法とは

おすすめタグ

ECサイト 動画 HTML レクリエーション 創業記念日 ASP SSL PageSpeed Insights スピードアップデート 動画広告 ECcube wordpress 構造化マークアップ カスタマイズ Transport Layer Security 保護されていない通信 HowTo Chrome TLS クリック率 ハウツー ノンデザイナー リッチリザルト Instagram広告 文字 デザイン フォント Core Web Vitals 自作PC 初心者 構造化データ Facebook広告 リモート iPhone CSS 動画制作 AMP 広告 HTML5広告 Google Chrome videoタグ GoogleMapsPlatform Zapier Facebook Audience Network Google my map ワイヤーフレーム Google for jobs Googleしごと検索 撮影 iPad 一眼レフカメラ 写真 自作パソコン ウェブサイト翻訳 Adobe XD PC組み立て XMLサイトマップ PHP タスクランナー gulp.js node.js WebP画像 楽天GOLD スマートフォン用新店舗トップページ Threads(スレッズ) Instagram Adobe Firefly 画像生成AI アセット生成 生成塗りつぶし Adobe MAX Japan 2023 UI UX Adobe Stock アンチックフォント Adobe Express Webマーケティング デジタルマーケティング 文字コード 符号化文字集合 生成拡張 Google Search Console レクタングルバナー 画質パラメーター shopify ショッピングサイト ショッピファイ Shopify使い方 WebP リモートワーク remotework プラグイン IE コーディング サイズパラメーター モダンブラウザ gridレイアウト object-fit aspect-ratio any-hover docker Photoshop クラウドドキュメント ディスプレイ広告 スマートオブジェクト gap Unicode(ユニコード)

Top