はじめに
PixiJSにて、iOSとChromeの両方でAutoPlay可能なビデオスプライトを作成しました。この記事は自動再生で詰まったポイントを記録、共有のするためのものです。
環境
この記事は以下の環境で動作することを想定しています。
- PixiJS v5.2.4
- Google Chrome v83.0.4103.97
- iOS 13.5.1のSafari
記事を読む前に、お手元の環境をご確認ください。
コード
動作するコードは以下の通りとなります。
const video = document.createElement("video");
video.src = "movie/movie.mp4";
video.muted = true;
video.setAttribute("playsinline", "");
const sprite = Sprite.from(video);
解説
ビデオテクスチャはブラウザの実装に依存する
PixiJSのビデオテクスチャは、ブラウザの機能を利用して動画を再生し、それをテクスチャとしてPixiJSに渡しています。そのため、動画の自動再生は各ブラウザのポリシーに合わせて設定する必要があります。
Chrome対応
Chromeはユーザーエクスペリエンスの維持のため、動画の自動再生に制限を設けています。
参考記事 developers.google.com : Autoplay Policy Changes
⭕️
video.muted = true;
videoエレメントのmutedプロパティにtrueを設定すると、自動再生が許可されます。
❌
video.setAttribute("muted", "");
videoエレメントにsetAttributeでmuted属性を追加すると、自動再生に失敗し以下のエラーがコンソールに出力されます。
Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
Chromeで自動再生を行う場合は、必ずmutedプロパティにtrueを代入しましょう。
iOS対応
iOSでVideoTextureの自動再生を有効にするにはplaysinline属性を設定する必要があります。
video.setAttribute("playsinline", "");
PixiJS上のVideoエレメントはインライン再生動画として扱われるため、この属性を設定しないとautoplayに失敗します。
設定する必要のないプロパティ / 属性
autoplay属性
Videoエレメントに、autoplay属性を設定する必要はありません。autoplayはPIXI.BaseTextureのコンストラクター引数resourceOptionsで制御されます。
以上、ありがとうございました。