alpha Lounge

20%の技術記事とオタクネタ

【JavaScript】iPhoneでカメラ(videoタグ)が動かない時の設定

小ネタです。
Webアプリでカメラ機能を実装する際、PCやAndroidChromeでは動いていたのに、iPhoneではSafariChromeどれでも動かないといった問題に出くわしました。

どうもiPhoneで動かすにはplaysinlineなどの属性が必要になるようです。

結論

<video id="hoge" class="huga"></video>

<video muted autoplay playsinline id="hoge" class="huga"></video>
  • autoplay
    • 自動再生
  • muted
    • 消音設定。iPhoneではこれがないと自動再生が有効にならない。
  • playsinline
    • インライン再生。一部のブラウザでは、これを指定しないと全画面再生になるとか。

これを見ると、埋め込みかつ自動再生というのを明確に指定しないと動かないということですね。覚えておきたい。

参考

Webアプリでカメラ操作したいときに見るメモ(javascript) - Qiita

videoタグで自動再生させるときの注意点!iOSはplaysinlineが必要 | Take-cast

[Javascript] iPhone safariでvideoタグを使った時に、NotAllowedErrorが出た時の回避方法-MYNT Blog