動画は自動再生されませんでした。
Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
これはSafariの自動再生のポリシーの変更によって、ユーザーがクリックなどのアクションを起こさないと動画を自動再生されないようになっています。
動画を読み込んだ後、クリックする処理を追加したりしたんですが、ダメでした。。。
動作しなかった実装
エラーが発生したコードを記載します。HTML
<video id="video" muted playsinline autoplay loop src="movie.mp4"></video>
Javascript
$(window).on('load', function(){
var v = document.getElementById("video");
v.play();
});
});
動作した実装
HTMLは変更無しです。Javascript側だけ変更してます。
HTML
<video id="video" muted playsinline autoplay loop src="movie.mp4"></video>
Javascript
let videoElem = document.getElementById("video");
playVideo();
async function playVideo() {
try {
await videoElem.play();
} catch(err) {
console.log(err);
}
}