<body>
<video src="1.mp4" autoplay></video>
</body>
<script>
const vd = document.querySelector('video')
vd.play()
</script>
コンソールを開くと、エラーが表示されます。
ユーザーがまだページとの対話をしていないため、このメソッドは失敗しましたと言っています。
これは、Chrome ブラウザの自動再生ポリシーによるもので、他のプレーヤーもほとんど同じです。
主な目的は、ユーザーエクスペリエンスを向上させることです。
そうでなければ、人が多い場所でウェブサイトを開いて、突然奇妙な音が鳴ると、その場で社会的に死ぬことになります。
では、解決策は何がありますか？
自動再生ポリシーには次のように記載されています。
- サウンドなしの自動再生を許可する
- iframe
- 以下の 3 つの条件のいずれかを満たす
- ユーザーが現在のドメインで対話を行った
- ユーザーがウェブサイトをモバイルデバイスのホームスクリーンに追加したり、デスクトップに PWA をインストールしたりした
- デスクトップデバイスで、ユーザーのメディアエンゲージメントが閾値を超える
では、メディアエンゲージメントとは何でしょうか？
この値が高いほど、ブラウザはこのウェブサイトのコンテンツにより関心があると判断し、一定の値に達すると、自動的にビデオの再生を許可します。
Chrome ブラウザでは、chrome://media-engagement/を開いて確認できます。
左側は訪問したドメインで、右側はエンゲージメントの値です。値が高いほど、自動再生の可能性が高くなります。
しかし、私たちのウェブサイトにはそのような高い値はありません。では、どのように自動再生を実現できるのでしょうか？
- iframe は親ウィンドウが自動再生の機能を持っている場合、子ウィンドウに渡すことができますが、これは適切ではありません。
- ユーザーがウェブサイトを開いたばかりで、まだ対話していない場合、どうして可能でしょうか。
- モバイルデバイスにホームスクリーンに追加したり、デスクトップに PWA をインストールしたりすることはほとんどありません。
したがって、残された方法は 2 つだけです。
- 静音再生で、ユーザーに音量を手動で開くようにします。
- 自動再生できないことを検出し、ユーザーに再生をクリックするように促します。
ビデオサイトはどのようにしているか見てみましょう。
私の Bilibili のエンゲージメントが高すぎるため、別のコンピューターでスクリーンショットを表示します。
Bilibili は静音再生です。
TikTok は再生をクリックするようにユーザーに促します。
では、どの方法を選びますか？