A-FRAME v0.8.2でvr-modeに移行したときに、iOS 11.3 Safariで動画の再生が一時停止される一時対処法

概要

A-FRAME v0.8.2を使用したときに、iOS 11.3.1で動画を再生しながらvr-modeへ移行したときに、動画がpauseされる事象の一時対処方法です。

注意：他のOSバージョンは試せていないです。

再現環境

• iOS 11.3.1
• A-FRAME v0.8.2

結論

とりあえず一時対処手段から

AFRAME.utils.device.getVRDisplay().wakelock_.noSleepVideo.moted = trueにすれば動作します。

簡易実装例

// renderstartイベントを待たなくても
// <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
// が読み込まれた後であれば、大丈夫かと思います。
document.getElementByTagNames('a-scene')[0].addEventListener('renderstart', () => {
  const disp = AFRAME.utils.device.getVRDisplay();
  // PCの場合にwakelock_はセットされなくて、wakelock_.noSleepVideoはiOS 10未満の場合にセットされないためチェックする
  if (disp && disp.wakelock_ && disp.wakelock_.noSleepVideo) {
    disp.wakelock_.noSleepVideo.muted = true
  }
})

原因

A-FRAME v0.8.2で使用されているwebvr-polyfill v0.10.5で使用されているcardboard-vr-display v1.0.11で使用されているNoSleep.js v0.7.0で、生成しているHTMLVideoElementのmutedをtrueに設定されていないため、iOS Safariでの複数動画再生の条件に引っかかっているようです。

この辺を見るとなんとなく処理順がわかるかもです

• https://github.com/aframevr/aframe/blob/v0.8.2/src/core/scene/a-scene.js#L253
• https://github.com/immersive-web/cardboard-vr-display/blob/v1.0.11/src/base.js#L382
• https://github.com/immersive-web/cardboard-vr-display/blob/v1.0.11/src/base.js#L120
• https://github.com/richtr/NoSleep.js/blob/v0.7.0/src/index.js#L15