商品ページにアップロードした動画を自動再生させたい質問。参考サイトのように、再生ボタンをクリックせずに動画を自動再生する実装を目指している。
現状の問題点:
product-media.liquidにmuted: trueを追加したが変化なし<video>タグは<template>タグ内で生成され、クリック時にJavaScriptで表示される仕組み解決方法:
Qcoltd氏が段階的にアドバイスを提供:
autoplay、muted、loop、playsinline属性をvideoタグに付与する必要性を説明最終的な解決:
質問者がproduct-media.liquidではなく、product-thumbnail.liquidの同部分にコードを適用したところ、自動再生が成功した。
商品管理画面のメディアにアップロードした動画を、自動再生にしたいです。
↓参考サイト
https://jaxxon.com/products/figaro-chain-3mm-gold?length=22
テーマはDawnを使用しており、現状は動画の箇所にある再生ボタンをクリックしないと再生されません。
こちらの記事を参考にし、product-media.liquid内3か所にmuted: true, を追加しましたが、変化がありません。
https://community.shopify.com/post/1239233
現状は再生ボタンをクリックすると、tamplateタグの下にvideoタグが生成される動きです。
初めからvideoタグがある状態にし、参考サイトのように自動再生するにはどうすればいいかご教授いただけないでしょうか。
参考にされているサイトと同様のAttribute(属性)をvideoタグに付与してみてはいかがでしょうか？
参考サイトのHTMLタグ
下記の属性全てを、videoタグに付与します。
autoplay muted loop playsinline
各属性の意味については下記のサイト様の記事を参考にされると良いかもしれません。
https://senoweb.jp/note/tag-video/
ご参考まで。
(キュー田辺)
ご返信ありがとうございます。
現在のテーマでは直接
該当箇所はproduct-media.liquidの67行目～で、下記コードになります。
参考記事を基に、この部分のautoplay: trueのある箇所の前に、独自で"muted: true"を追加しています。
実際にサイトをプレビューすると、生成されたvideoタグにmuted="muted"が追加されているのですが、自動再生とはなりません。
現状の挙動は、動画箇所の静止画をクリックすると該当の～の下に、
これをクリック無しで初めから
申し訳ございませんがこのような場で質問し慣れていなく、不足している情報があればお知らせください。
貼っていただいたコードを拝見しますと、
おそらくご利用中のテーマはDawnで、
おそらく最新のバージョン(10)か比較的新しめのバージョンだと思いますので、
その前提で回答いたします。
Dawnをお使いなのであれば、
現状は下記のようになっているはずです。
商品のメディアに動画ファイルを追加する
商品詳細ページのメディア一覧部分に、動画が表示される
この動画は「画像」であり、再生ボタンが画像の中央に表示されている
この再生ボタンをクリックするとvideoタグが生成され、動画が再生される
ブラウザのdeveloper toolsやソース表示でHTMLを確認した際に、
templateタグの中にvideoタグを見つけることができると思いますが、
templateタグの中にある要素は、JavaScriptで操作するまで表示されません。
上記の「3」の段階で見えているのはあくまで動画のサムネイル画像です。
再生ボタンをクリックすることで、
templateの中のvideoタグを表示する、
という処理をJavaScriptで行っています。
では、どうすれば良いか、ですが、
あらゆる状況において問題がないカスタマイズを提案するのは大変なので、
何か問題が出る可能性があるが多くの場合問題ないだろうという方法を記載いたします。
まず、こちらのコードを、
下記のようにします。(templateの閉じタグの下にvideoタグの出力を追加)
{%- if media.media_type == 'video' -%}
{{ media | media_tag: image_size: "2048x", autoplay: true, loop: loop, controls: true, preload: "none" }}
{%- endif -%}
次に、
templateタグの少し上にあるこちらのコードを、
{%- if media.media_type == 'model' -%}
{{ 'products.product.media.play_model' | t }}
{%- render 'icon-3d-model' -%}
{%- else -%}
{{ 'products.product.media.play_video' | t }}
{%- render 'icon-play' -%}
{%- endif -%}
下記のようにします。(videoの時に、再生ボタンを表示しないようにします。)
{%- if media.media_type != 'video' -%}
{%- if media.media_type == 'model' -%}
{{ 'products.product.media.play_model' | t }}
{%- render 'icon-3d-model' -%}
{%- else -%}
{{ 'products.product.media.play_video' | t }}
{%- render 'icon-play' -%}
{%- endif -%}
{%- endif -%}
なお、
videoタグへのmutedの追加(muted: trueの追加)は不要なようです。
(liquidがautoplayがtrueであれば自動的にmutedを出力してくれるようです。)
問題がないとは言い切れないコード修正案で恐縮ですが、
参考になれば幸いです。
(キュー田辺)
キュー田辺様
ご返信いただきありがとうございます。
仰るとおり、Dawnは最新のバージョン10です。
早速頂いたコードに書き換えましたが、挙動は変わらずでした。
ページ読み込み時に再生ボタンはあり、templateタグの下にvideoタグはない状態です。
そうなるとjavascriptを変更するしかないのでしょうか。
何度も申し訳ございませんが、何か案がございましたらご教授いただきたいです。
よろしくお願いいたします。
特別なカスタマイズを行っていらっしゃらないようでしたら、
提案したコードカスタマイズでうまく行くはずなのですが、
もし、うまく行っていない場合、下記2点の可能性が考えられます。
Shopify側のページキャッシュ
コードカスタマイズに誤りがある
1の場合でしたら、少し待ってからアクセスすることで変更が反映されるはずです。(1分くらいでShopify側のページキャッシュはなくなると思います。)
2の場合は、どのような誤りがあるかを、ストアにアクセスさせていただいて確認しないと何とも言えません。
プライベートメッセージでやりとりさせていただいて、コラボレーターアクセスを頂戴できれば、具体的な回答ができます。
(必ずの解決はお約束できませんが。)
そうなるとjavascriptを変更するしかないのでしょうか。
JavaScriptの修正も変更になる可能性はありますが、
JavaScriptはあくまでtemplateをどのように扱うかを決めているだけですので、
JavaScriptの修正は本質ではなく、(修正が不要な可能性もあります。)
どちらかというとHTMLとLiquidの修正になるはずです。
(キュー田辺)
キュー田辺 様
ご返信いただきありがとうございます。
反映されない原因1と2について、
1.キャッシュをクリアした状態で見ても変わらず→可能性低
2.まっさらなDawnを複製し、再度該当のコードのみ差し替えましたが変化なしでした。
恐れ入りますが、一度メッセージを送らせていただきます。
よろしくお願いいたします。
こちらのコードをproduct-media.liquidではなく
product-thumbnail.liquidの同部分に書き換えたところ、
無事自動再生されました。
ご丁寧にご教授いただき、誠にありがとうございました。
大変助かりました！