Liquid、JavaScriptなどに関する質問
やりたいこと
iPhoneの省電力モードでも、埋め込み動画を自動再生させたい。
試したこと1
<video>に動画ファイルのパスを設定し、autoploy, muted, playsinline 属性を追加。(動画は音声無しで作成)
<div class="video_wrapper top-white-space">
<video src="動画ファイルのパス" type="video/mp4" style="max-width: 100%; height: auto;" loop autoplay muted playsinline>
</video>
</div>
結果1
再生ボタンが表示され自動再生されない。
(iPhoneの省電力モード以外で試すと、期待通り自動再生される。)
試したこと2
<video>に muted, playsinline 属性を付与(autoplayはなし)、ページロード時に HTMLVideoElement.play()で再生する。
<div class="video_wrapper top-white-space">
<video id="video-top" type="video/mp4" style="max-width: 100%; height: auto;" loop muted playsinline>
</video>
</div>
{% schema %}
{
"name": "video-top",
"settings": []
}
{% endschema %}
<script type="text/javascript">
window.onload = onLoad;
function onLoad() {
var video = document.getElementById ("video-top");
video.src="動画ファイルパス";
video.play();
}
</script>
結果2
動画自体が表示されない。
(iPhoneの省電力モード以外で試すと、期待通り自動再生される。)
どなたか解決策をご存知でしたら教えていただきたいです。
省電力モードの仕様だったと思いますので、自動再生は無理かと思います。
なお、文字通り消費電力を抑えるためのモードなので、ストア側が無理やり自動再生を強要するのは問題に思われ、個人的にはあまりお勧めできません。
どうしてもという場合はGifアニメーションに変換して用いれば自動再生と同義になるとは思いますが、データサイズや画質の問題があるのでこれも難しいと思われます。
リエンゲージメントの自動化で売り上げ向上へ!素敵なオンラインストアを作成し、見込み顧客の携帯へ広告を直接に送信する、またはSNSなどで宣伝すると、お客様がストアに行き着...
By Mirai Mar 24, 2024Shopifyは世界で最も革新的なブランドと起業家をサポートしています。個人起業家やあらゆる規模のビジネスの成長を後押しするために、Shopify アカデミーではShopif...
By SarahF_Shopify Mar 22, 2024オンラインストア運営はとてもやりがいのある活動です。新しい注文が入った時の喜びや世界中のお客様とやりとりできる可能性、商品に対して最高のレビューをもらった時の満足感は、毎日の...
By Mina Mar 13, 2024