FROM CACHE - jp_header

iPhoneの省電力モードで埋め込み動画を自動再生したい

nanashi
訪問者
1 0 0

やりたいこと 

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の省電力モード以外で試すと、期待通り自動再生される。)

 

どなたか解決策をご存知でしたら教えていただきたいです。

1件の返信1

Jizo_Inagaki
Shopify Partner
989 373 690

省電力モードの仕様だったと思いますので、自動再生は無理かと思います。
なお、文字通り消費電力を抑えるためのモードなので、ストア側が無理やり自動再生を強要するのは問題に思われ、個人的にはあまりお勧めできません。

どうしてもという場合はGifアニメーションに変換して用いれば自動再生と同義になるとは思いますが、データサイズや画質の問題があるのでこれも難しいと思われます。

Jizo_Inagaki | フリーランスのwebデザイナー
- テーマのカスタム承れます。
- 記載した回答で解決できましたらベストソリューションの承認をお願いします。
- DMや指名による対応はご依頼として有料でのみ承ります。