先日突き当たった実装の壁の覚書。


 

問題


先日、A-Frame上でこんな実装をしようとしていました。

・再生ボタンをクリック
・動画A（音あり）を再生開始
・ボタン押下3秒後、動画B（音なし）を再生開始
・2つの動画が同時に流れている状態が続く

コードをめちゃくちゃシンプルに書くとこんな感じ。

 const startVideo = () => {
        videoA.play()
        setTimeout(() => {
          videoB.play()
        }, 3000)
    }
 
 playButton.addEventListener('click', startVideo)
 

上記のコードで、Android（Chrome）では問題なく動作したのですが、iOS（Safari）では以下のような動きになってしまいました。

・再生ボタンをクリック
・動画A（音あり）を再生開始
・ボタン押下3秒後、動画B（音なし）を再生開始すると同時に、動画Aが停止
・動画Bだけが流れていく...（特にエラーは出ていない）

なんで？(๑╹ω╹๑ )



原因と対処


どうやら自動再生ポリシーにひっかかっていたっぽいです。

以下のように、事前にビデオをミュートしておき、再生ボタンがクリックされたら、ミュートを外して再生する、という形で回避できました。


 videoA.muted = true
 videoB.muted = true

 const startVideo = () => {
     videoA.muted = false
     videoA.play()
     setTimeout(() => {
       videoB.play()
     }, 3000)
  } 

playButton.addEventListener('click', startVideo)


※ただ、今回の仕様として、後から再生するvideoBがたまたま無音だったのでうまくいったケースと言えるかもしれません。