FROM CACHE - jp_header
解決済

商品画像の動画を自動再生にしたい

do4nd81oko
Shopify Partner
10 0 1

商品管理画面のメディアにアップロードした動画を、自動再生にしたいです。

↓参考サイト

https://jaxxon.com/products/figaro-chain-3mm-gold?length=22

 

テーマはDawnを使用しており、現状は動画の箇所にある再生ボタンをクリックしないと再生されません。

こちらの記事を参考にし、product-media.liquid内3か所にmuted: true, を追加しましたが、変化がありません。

https://community.shopify.com/c/shopify-design/how-do-i-autoplay-a-video-in-my-product-page/m-p/1239...

 

現状は再生ボタンをクリックすると、tamplateタグの下にvideoタグが生成される動きです。

初めからvideoタグがある状態にし、参考サイトのように自動再生するにはどうすればいいかご教授いただけないでしょうか。

 

1 件の受理された解決策
Qcoltd
Shopify Partner
1051 429 417

成功

@do4nd81oko 様

 

貼っていただいたコードを拝見しますと、

おそらくご利用中のテーマはDawnで、

おそらく最新のバージョン(10)か比較的新しめのバージョンだと思いますので、

その前提で回答いたします。

 

Dawnをお使いなのであれば、

現状は下記のようになっているはずです。

 

1. 商品のメディアに動画ファイルを追加する

2. 商品詳細ページのメディア一覧部分に、動画が表示される

3. この動画は「画像」であり、再生ボタンが画像の中央に表示されている

4. この再生ボタンをクリックするとvideoタグが生成され、動画が再生される

 

ブラウザのdeveloper toolsやソース表示でHTMLを確認した際に、

templateタグの中にvideoタグを見つけることができると思いますが、

templateタグの中にある要素は、JavaScriptで操作するまで表示されません。

上記の「3」の段階で見えているのはあくまで動画のサムネイル画像です。

 

再生ボタンをクリックすることで、

templateの中のvideoタグを表示する、

という処理をJavaScriptで行っています。

 

では、どうすれば良いか、ですが、

あらゆる状況において問題がないカスタマイズを提案するのは大変なので、

何か問題が出る可能性があるが多くの場合問題ないだろうという方法を記載いたします。

 

まず、こちらのコードを、

    <template>
      {%- liquid
        case media.media_type
        when 'external_video'
          assign video_class = 'js-' | append: media.host
          if media.host == 'youtube'
            echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
          else
            echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
          endif
        when 'video'
          echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
        when 'model'
          echo media | media_tag: image_size: "2048x", toggleable: true
        endcase
      -%}
    </template>

下記のようにします。(templateの閉じタグの下にvideoタグの出力を追加)

    <template>
      {%- liquid
        case media.media_type
        when 'external_video'
          assign video_class = 'js-' | append: media.host
          if media.host == 'youtube'
            echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
          else
            echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
          endif
        when 'video'
          echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
        when 'model'
          echo media | media_tag: image_size: "2048x", toggleable: true
        endcase
      -%}
    </template>
    {%- if media.media_type == 'video' -%}
      {{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
    {%- endif -%}

 

次に、

templateタグの少し上にあるこちらのコードを、

      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
          {%- render 'icon-3d-model' -%}
        {%- else -%}
          <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
          {%- render 'icon-play' -%}
        {%- endif -%}
      </span>

 下記のようにします。(videoの時に、再生ボタンを表示しないようにします。)

      {%- if media.media_type != 'video' -%}
      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
          {%- render 'icon-3d-model' -%}
        {%- else -%}
          <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
          {%- render 'icon-play' -%}
        {%- endif -%}
      </span>
      {%- endif -%}

 

 

なお、

videoタグへのmutedの追加(muted: trueの追加)は不要なようです。

(liquidがautoplayがtrueであれば自動的にmutedを出力してくれるようです。)

 

問題がないとは言い切れないコード修正案で恐縮ですが、

参考になれば幸いです。

(キュー田辺)

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

元の投稿で解決策を見る

7件の返信7

Qcoltd
Shopify Partner
1051 429 417

参考にされているサイトと同様のAttribute(属性)をvideoタグに付与してみてはいかがでしょうか?

 

参考サイトのHTMLタグ

<video autoplay muted loop playsinline id="video" class="css-15b2tjg">
<source type="video/mp4" src="xxxx.mp4" alt="xxxxxxxx">
</video>

 

下記の属性全てを、videoタグに付与します。

autoplay muted loop playsinline

 

各属性の意味については下記のサイト様の記事を参考にされると良いかもしれません。

https://senoweb.jp/note/tag-video/

 

ご参考まで。

(キュー田辺)

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

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

現在のテーマでは直接<video>タグが書かれてなく、liquidでvideoタグが生成されているのではないかと思います。

該当箇所はproduct-media.liquidの67行目~で、下記コードになります。

 

 

<template>
      {%- case media.media_type -%}
      {%- when 'external_video' -%}
        {%- assign video_class = 'js-' | append: media.host -%}
        {%- if media.host == 'youtube' -%}
          {{ media | external_video_url: muted: true, autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy" }}
        {%- else -%}
          {{ media | external_video_url: muted: true, autoplay: true, loop: loop, playlist: media.external_id }}
        {%- endif -%}
      {%- when 'video' -%}
        {{ media | media_tag: image_size: "2048x", muted: true, autoplay: true, loop: loop, controls: true, preload: "none" }}
      {%- when 'model' -%}
        {{ media | media_tag: image_size: "2048x", toggleable: true }}
      {%- endcase -%}
</template>

 

 

参考記事を基に、この部分のautoplay: trueのある箇所の前に、独自で"muted: true"を追加しています。

実際にサイトをプレビューすると、生成されたvideoタグにmuted="muted"が追加されているのですが、自動再生とはなりません。

 

現状の挙動は、動画箇所の静止画をクリックすると該当の<template>~</template>の下に、<video>タグが生成され、再生されます。

これをクリック無しで初めから<video>タグを表示させるにはどうすればよいかがわかりません。

申し訳ございませんがこのような場で質問し慣れていなく、不足している情報があればお知らせください。

Qcoltd
Shopify Partner
1051 429 417

成功

@do4nd81oko 様

 

貼っていただいたコードを拝見しますと、

おそらくご利用中のテーマはDawnで、

おそらく最新のバージョン(10)か比較的新しめのバージョンだと思いますので、

その前提で回答いたします。

 

Dawnをお使いなのであれば、

現状は下記のようになっているはずです。

 

1. 商品のメディアに動画ファイルを追加する

2. 商品詳細ページのメディア一覧部分に、動画が表示される

3. この動画は「画像」であり、再生ボタンが画像の中央に表示されている

4. この再生ボタンをクリックするとvideoタグが生成され、動画が再生される

 

ブラウザのdeveloper toolsやソース表示でHTMLを確認した際に、

templateタグの中にvideoタグを見つけることができると思いますが、

templateタグの中にある要素は、JavaScriptで操作するまで表示されません。

上記の「3」の段階で見えているのはあくまで動画のサムネイル画像です。

 

再生ボタンをクリックすることで、

templateの中のvideoタグを表示する、

という処理をJavaScriptで行っています。

 

では、どうすれば良いか、ですが、

あらゆる状況において問題がないカスタマイズを提案するのは大変なので、

何か問題が出る可能性があるが多くの場合問題ないだろうという方法を記載いたします。

 

まず、こちらのコードを、

    <template>
      {%- liquid
        case media.media_type
        when 'external_video'
          assign video_class = 'js-' | append: media.host
          if media.host == 'youtube'
            echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
          else
            echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
          endif
        when 'video'
          echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
        when 'model'
          echo media | media_tag: image_size: "2048x", toggleable: true
        endcase
      -%}
    </template>

下記のようにします。(templateの閉じタグの下にvideoタグの出力を追加)

    <template>
      {%- liquid
        case media.media_type
        when 'external_video'
          assign video_class = 'js-' | append: media.host
          if media.host == 'youtube'
            echo media | external_video_url: autoplay: true, loop: loop, playlist: media.external_id | external_video_tag: class: video_class, loading: "lazy"
          else
            echo media | external_video_url: autoplay: true, loop: loop | external_video_tag: class: video_class, loading: "lazy"
          endif
        when 'video'
          echo media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none"
        when 'model'
          echo media | media_tag: image_size: "2048x", toggleable: true
        endcase
      -%}
    </template>
    {%- if media.media_type == 'video' -%}
      {{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
    {%- endif -%}

 

次に、

templateタグの少し上にあるこちらのコードを、

      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
          {%- render 'icon-3d-model' -%}
        {%- else -%}
          <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
          {%- render 'icon-play' -%}
        {%- endif -%}
      </span>

 下記のようにします。(videoの時に、再生ボタンを表示しないようにします。)

      {%- if media.media_type != 'video' -%}
      <span class="deferred-media__poster-button motion-reduce">
        {%- if media.media_type == 'model' -%}
          <span class="visually-hidden">{{ 'products.product.media.play_model' | t }}</span>
          {%- render 'icon-3d-model' -%}
        {%- else -%}
          <span class="visually-hidden">{{ 'products.product.media.play_video' | t }}</span>
          {%- render 'icon-play' -%}
        {%- endif -%}
      </span>
      {%- endif -%}

 

 

なお、

videoタグへのmutedの追加(muted: trueの追加)は不要なようです。

(liquidがautoplayがtrueであれば自動的にmutedを出力してくれるようです。)

 

問題がないとは言い切れないコード修正案で恐縮ですが、

参考になれば幸いです。

(キュー田辺)

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

キュー田辺様

 

ご返信いただきありがとうございます。

仰るとおり、Dawnは最新のバージョン10です。

 

早速頂いたコードに書き換えましたが、挙動は変わらずでした。
ページ読み込み時に再生ボタンはあり、templateタグの下にvideoタグはない状態です。

そうなるとjavascriptを変更するしかないのでしょうか。
何度も申し訳ございませんが、何か案がございましたらご教授いただきたいです。
よろしくお願いいたします。

 

Qcoltd
Shopify Partner
1051 429 417

@do4nd81oko 様

 

特別なカスタマイズを行っていらっしゃらないようでしたら、

提案したコードカスタマイズでうまく行くはずなのですが、

もし、うまく行っていない場合、下記2点の可能性が考えられます。

 

1. Shopify側のページキャッシュ

2. コードカスタマイズに誤りがある

 

1の場合でしたら、少し待ってからアクセスすることで変更が反映されるはずです。(1分くらいでShopify側のページキャッシュはなくなると思います。)

 

2の場合は、どのような誤りがあるかを、ストアにアクセスさせていただいて確認しないと何とも言えません。

プライベートメッセージでやりとりさせていただいて、コラボレーターアクセスを頂戴できれば、具体的な回答ができます。

(必ずの解決はお約束できませんが。)

 

 

そうなるとjavascriptを変更するしかないのでしょうか。

JavaScriptの修正も変更になる可能性はありますが、

JavaScriptはあくまでtemplateをどのように扱うかを決めているだけですので、

JavaScriptの修正は本質ではなく、(修正が不要な可能性もあります。)

どちらかというとHTMLとLiquidの修正になるはずです。

 

(キュー田辺)

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

キュー田辺 様

 

ご返信いただきありがとうございます。

反映されない原因1と2について、

1.キャッシュをクリアした状態で見ても変わらず→可能性低

2.まっさらなDawnを複製し、再度該当のコードのみ差し替えましたが変化なしでした。

 

恐れ入りますが、一度メッセージを送らせていただきます。

よろしくお願いいたします。

do4nd81oko
Shopify Partner
10 0 1

こちらのコードをproduct-media.liquidではなく

product-thumbnail.liquidの同部分に書き換えたところ、

無事自動再生されました。

ご丁寧にご教授いただき、誠にありがとうございました。

大変助かりました!