投稿日:2023/11/20 最終更新日:2023/11/20
【解決】Safariで起こる「The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.」の解決方法
音源や動画をJavaScriptで指定のタイミングで再生させようとした際にSafariでは再生できない時があります。
そんな時は下記エラーが出ているかを確認してください。
The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
こちらの解決法をご紹介します。
まず原因は？
もう一度エラーをおさらいしてみましょう。
The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
簡単に略すと「Safariではユーザーのアクションでないと再生できないよ！」と言っています。
Safariではクリックなどのユーザーが何かしら操作をしない限りに音源や動画を再生させることはできない仕様になっています。
おそらく勝手に再生されてビックリしないようにするための仕様だと思いますが、WEB制作では困ることがありますね、、
ちなみにChromeではこのエラーは表示されません。
【解決法①】ロード後に自動再生をさせたい場合
ページをロードした直後に音源や動画を自動で再生させたい場合の対処法です。
こちらJavaScriptの実行はなくHTMLの編集で済みます。
<video id="video" class="video" muted playsinline autoplay loop src="movie.mp4"></video>上記コードにある「muted playsinline autoplay loop」の4つを記載しましょう。
この中でloopは指定しなくてもOKです。
【解決法②】指定のタイミングで自動再生させたい場合
つまりロードした後に何かしらのアニメーションが実行されて、その後に動画を再生させたい場合などです。
この場合はちょっと工夫が必要です。
1回ロードさせよう！
いきなり結論ですが、再生させたい動画もしくは音源を1回ロードさせた上で再生をさせると上手くいきます。
とは言ってもどのような手順を踏むべきか解説していきます。
何でもいいからユーザーアクションを作る
再生の前段階で何かしらのユーザーアクションがある場合は、ユーザーアクション後にロードを挟みましょう。
私の場合は初期表示時にモーダル表示のボタンをクリックさせる場面がありましたので、そのボタンをクリックした後にロードさせる形にしました。
<video id="video" class="video" muted playsinline autoplay src="movie.mp4"></video>const button = document.querySelector(".ボタンのクラス名");
// 動画であれば↓
const movie = doument.querySelector(".再生したい動画のクラス名”);
movie.autoplay = false;
movie.muted = false;
button.addEventListner("click", function() {
movie.load();
movie.play();
// それでも再生されない場合は「movie.play();」を下記に書き換え
setTimeput(() => {
movie.play();
}, 1000);
});
// 音源であれば↓
const audio = doument.querySelector(".再生したい音源のクラス名”);
button.addEventListner("click", function() {
audio.load();
audio.play();
// それでも再生されない場合は「audio.play();」を下記に書き換え
setTimeput(() => {
audio.play();
}, 1000);
});まとめ
今回は「Safariで起こる「The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.」の解決方法」を紹介しました。
Safariのこの仕様はめんどくさいのでなんとかして欲しいですね、、、
