Day18です!昨日は「3D空間上に2DのUIを重ねる【これからはじめるReact360】」という記事でした。本日は「Safariで動画と音声が再生されない場合の解決方法」という記事を書いてきます!Safariでは自動再生の規制により、動画と音声が再生されないことがあります。コードを修正すれば解決できるので、今回はその方法をご紹介していきます。「再生できない」といわれる事象の原因は、この自動再生の挙動による可能性がかなり高いです。{video.play();audio.play();});上記のタイミングで無理やり再生させようとしてもうまくいきません。自動再生できない理由って?なぜ自動再生できない仕様になったのか調べてみました。・大きな容量のファイルのユーザーの同意なしに読み込ませないため・広告の動画がいきなり音声付きで再生されることを防ぐためと、すごく納得できる内容です。ユーザーに優しいけど開発者には厳しいですね...。すれば良いの?クリックやタップなどユーザーのアクションが必要となります。UIとしてパッと思いついたのは下記の2パターンです。モーダル内ボタン弊社で実装したことがあり自動再生っぽく見えておすすめなのは、Bのモーダル内ボタンなので実例を見てみましょう。任意のタイミング(マーカー認識)で動画を再生コード※SP用にtouchstartイベントを使用しました。動画再生});まとめ今回は「Safariで動画と音声が再生されない場合の解決方法」をご紹介しました。WebGLとReactが強みと言えるように頑張ってます。関連記事アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。