FROM CACHE - jp_header
解決済

TOPページの動画を音声が流れてる状態で自動再生したい

kenn1
Shopify Partner
4 0 0

初めまして、Kenn1と申します。
下記を参考に動画の自動再生は出来たのですが、音声が流れないのでどのようにしたら良いのか教えて欲しく投稿させていただきました。

音声は最初から流れてる状態にしたいです。

参考にした投稿
https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/top%E3%83%9A%E3%83%BC%E3%82%...

1 件の受理された解決策

Qcoltd
Shopify Partner
1051 429 417

成功

@kenn1

 

動画の音声を流しながら自動再生させたい件ですが、

ChromeやSafriなどのブラウザでは動画を自動再生させる条件としてミュートであることが推奨されています。

https://developer.chrome.com/blog/autoplay?hl=ja

 

ですのでShopifyでなくても、ご要望の状態で動画再生させることは難しいかと思われます。

 

ちなみに参考にされました投稿でも自動再生させるため、ミュートの設定が『muted: true』とtrue設定になっています。

<div class="qcoltd-video-auto-loop-wrap">
  {{
    section.settings.video
    | video_tag:
      image_size: '1100x',
      autoplay: true,
      loop: true,
      controls: false,
      muted: true
  }}
</div>

 

ご参考まで

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/

元の投稿で解決策を見る

2件の返信2

Qcoltd
Shopify Partner
1051 429 417

成功

@kenn1

 

動画の音声を流しながら自動再生させたい件ですが、

ChromeやSafriなどのブラウザでは動画を自動再生させる条件としてミュートであることが推奨されています。

https://developer.chrome.com/blog/autoplay?hl=ja

 

ですのでShopifyでなくても、ご要望の状態で動画再生させることは難しいかと思われます。

 

ちなみに参考にされました投稿でも自動再生させるため、ミュートの設定が『muted: true』とtrue設定になっています。

<div class="qcoltd-video-auto-loop-wrap">
  {{
    section.settings.video
    | video_tag:
      image_size: '1100x',
      autoplay: true,
      loop: true,
      controls: false,
      muted: true
  }}
</div>

 

ご参考まで

(キュー小坂)

株式会社Q (キュー)
グラフィックデザイン、アパレル事業、Web制作など色々やっている渋谷区代々木の会社です。ShopifyでのECサイトの運営・開発も行なっています。
私たちについて: https://web.q-co.jp/ テックブログ: https://techlab.q-co.jp/
kenn1
Shopify Partner
4 0 0

Qcoltd 様返信ありがとうござます。

なるほど、browserの仕様なのですね。
マーチャント様に説明し、どうするか決めていきます。

ありがとうございました!