videoタグにめっぽう詳しくなってしまった、ユゲタです。
videoタグって、Camvasタグと連想したり、パソコンに備え付けられているカメラと連動させたり、Permissionをしっかりと理解していれば、かなり面白い使い方ができる事も理解することができました。
そんな中、iPhoneのsafariでだけ、videoタグに表示がされないという不具合が発見されたので、その調査と対応方法についての調査結果を備忘録しておきます。
原因調査
先日ロンチした、CallMYNTの開発中に発生した不具合です。
ビデオチャットサービス「CallMYNT」
開発中は、同じパソコン内で、GoogleChromeブラウザとSafariブラウザの２つで、相互にビデオチャットを確認しながら行っていたんですが、
これをスマートフォンからアクセスするためには、SSLがセットされている必要があるので、本番環境（または、ステージング環境）での接続が必要になります。
パソコンで問題がなければ、ほぼロンチ状態として、本番アップしてしまうので、今回の症状は本番公開後に発覚したというコトですね。
iPhoneだけvideoタグの表示が真っ暗になっていました。
確か、開発初期の段階では、正常に表示されていたんですが、何故か表示がされてないんですよね。
iPhoneのsafariは、開発しているパソコンと同じwifi環境にある場合は、wifi経由でパソコン（mac）内のsafariブラウザで、デバッグコンソール（javascriptコンソール）が確認できるようになるので、
それで見てみると「NotAllowedError」というエラーが表示されていました。
色々調べてみると、safariブラウザは、セキュリティ項目が他のブラウザよりも厳しめになっていて、ブラウザからcameraやmicへのデバイスアクセスをするためには、パーミッションダイアログを通過しなければいけなかったり、
自動再生するためには、videoタグがmuteになっている必要があるとか・・・
色々とめんどくさい感じです。
それにしても、不思議なのは、Mac内のSafariでは正常に表示できているのに、iPhoneのSafariではエラーになるという点です。
解決方法
他のサイトでは、Javascriptで、video.playsinline=true という記述を行うとか、video.play()をoncanplayイベント発火で行うとか、
いろいろな書き方をされていましたが、それらは全てセットした状態で、どれもダメでした。
最終的に、videoタグを次の様にすると解決しました。
<video></video>
↓このように変更
<video muted playsinline></video>
なんと、直接属性を書き込んでやると何故か解消する事ができました。
どうしても、javascriptでやりたい場合は、次の様にすると、解決することができます。
video.muted = true
video.playsinline = true
↓次の様に書き直す
video.setAttribute('muted' , '')
video.setAttribute('playsinline' , '')
なんだか、これってブラウザ側のバグだろ！と思う様なオチですが、iOS15.5の現在バージョンでは、こうする方法しか無い様です。
他の方法を知っている方、教えてくだされ！
0 件のコメント:
コメントを投稿