1. オーディオとビデオの自動再生ソリューション

1.1. 背景を使う

会社のプロジェクトではオーディオの自動再生機能を使用する必要があります。最初に頭に浮かぶのは autoplay 属性です。

コンテンツを自動的に再生する最も簡単な方法は、要素に autoplay 属性を追加し、autoplay 属性を true に設定することです. autoplay 属性が true の場合、メディア要素は次の後にできるだけ早く自動的に再生を開始します:

ページは自動再生を許可します

ページの読み込み中にメディア要素が作成されました

ネットワークのパフォーマンスや帯域幅に大きな変化がなく、十分なメディアストリームが受信され、再生が開始された場合、再生はメディアの最後まで中断することなく続行されます。

しかし、実運用中に自動再生に失敗することが判明し、以下のエラーが発生しました

Uncaught (in promise) DOMException: ユーザーが最初にドキュメントを操作しなかったため、play() が失敗しました。

この問題は長い間私を悩ませていました, そしてそれを解決するプロセスは非常に困難だったので, 解決策を記録することにしました. 以下は、問題を解決する過程で見つけた情報と問題の解決策です.

2. オーディオとビデオの自動再生を禁止する理由は何ですか?

Web ページの読み込みが完了した直後にオーディオ (またはオーディオトラックを含むビデオ) を再生すると、誤ってユーザーの操作を中断する可能性があります。メディアファイルの自動再生は便利な機能ですが、慎重に使用し、必要な場合にのみ使用する必要があります。ユーザーが制御できるようにするために、ブラウザーは多くの場合、自動再生オーディオを無効にするさまざまな方法を提供します。この記事では、さまざまなメディアおよび Web オーディオ API の自動再生機能を紹介します。これには、自動再生機能の使用方法と、自動再生機能のブロックを適切に処理する方法に関する簡単な紹介も含まれます。

次の Web 機能と API は、自動再生ブロックの影響を受ける可能性があります。

HTML と要素

Webオーディオ API

3. Chrome ブラウザーの [オーディオ] タブの自動再生戦略

Chrome の自動再生ポリシーは単純です。

ミュートされた自動再生を常に許可する

トップレベルフレームは、自動再生を許可するために、自動再生のアクセス許可をその iframe に委任できます。

次の場合にサウンドの自動再生を許可する

ユーザーは、クリック、タッチ、キーの押下など、Web ページと対話しました。(ポップアップウィンドウを使用して、ユーザーがページボタンをクリックするように誘導します)

デスクトップクロームで、ユーザーのメディアエンゲージメントインデックスのしきい値を超えました。これは、ユーザーが以前に音声付きの動画を再生したことを意味します。（「メディアエンゲージメント指数」は後ほど紹介）

ユーザーがモバイルデバイスのホーム画面に Web サイトを追加したか、デスクトップに PWA をインストールしました。

私は PC 側で開発したので、上記の条件に基づいていくつかのソリューションを要約することしかできません。

オーディオのミュート属性を true に設定すると、ミュート再生を実現できますが、これは私のニーズを満たしていません

iframe の使用， <iframe src = "xxxxx.mp3" allow = "autoplay"/>

audio タグを使用し、autoplay を true に設定し、再生が失敗したときにページを操作して (ポップアップウィンドウがユーザーにクリックを促します)、自動再生を実現します。

4. ソリューション

プロジェクトがオーディオに関する他の機能も実装する必要があることを考慮すると、3 番目のソリューションを使用する方が便利です。

3 番目のオプションが選択されたので、自動再生が失敗したかどうかを確認する方法は? 実際、自動再生が失敗してもイベントは発生しません。また、スローされる例外や設定可能なコールバックはなく、メディア要素には、自動再生が機能しているかどうかを示すマーカーさえありません。自動再生だけに頼るのではなく、方向を変えることができますが、 play メソッドを使用して再生します. play メソッドが実行されると、promise が返されます. promise に従って、現在の再生が成功したか失敗したかを判断できます. 、失敗の後に決定を下します。

constaudioElem=document.querySelector("audio");
letstartPlayPromise=audioElem.play();

if (startPlayPromise!==undefined) {
  startPlayPromise.catch(error=> {
    if (error.name==="NotAllowedError") {
      // 弹窗引导用户与页面做交互，只需要一个简单的按钮即可
      // 记得在按钮上绑定一个带有play()方法的回调函数，以element-plus的组件为例
      ElMessageBox.alert('当前正在自动播放音频', '提示', {
        confirmButtonText: '确认',
        callback: () => {
          audioElem.play();
        },
      })
    } else {
      // Handle a load or playback error
    }
  }).then(() => {
    // Start whatever you need to do only after playback
    // has begun.
  });
}

5. さらに先へ

このポップアップウィンドウを見た後、製品が非常に動揺し、ユーザーに可能な限り操作の必要性を認識させずに自動再生を実現させようとしている場合、どうすればよいでしょうか?

ページを操作した後は正常に再生できるので、事前に操作イベントをドキュメント要素にバインドして、ユーザーの知らないうちに自然な方法で操作を完了することはできますか?

// 点击
document.addEventListener('click', () => {
    document.querySelector("audio").play();
});

// 监听鼠标移动的事件
document.addEventListener('mousemove', () => {
    document.querySelector("audio").play();
});

6. MEI メディアエンゲージメントインデックス

chormeを核としたブラウジングでは、 MEI（Media Engagement Index）のリストが設定され、その長さは1000で、ユーザーがウェブサイトの「忠実なユーザー」であるかどうかを測定するために使用されます。MEIランキングが十分に高い場合、自動的にプレイできます。

MEI は、個人が Web サイトでメディアを消費する傾向を測定します。Chromeの現在のアプローチは、オリジンごとの重要なメディア再生イベントへの訪問の比率です。

メディア (オーディオ/ビデオ) の消費は 7 秒を超える必要があります。

オーディオが存在する必要があり、ミュートすることはできません。

ビデオのあるタブがアクティブです。（表示：なし、可視性：非表示などは設定できないのが個人的な感覚です）

動画のサイズ (px) は200x140より大きくする必要があります。

これから、Chrome は、定期的にメディアを再生するサイトで十分に高いメディアエンゲージメントスコアを計算し、デスクトップでのメディア再生の自動再生を許可します。

ユーザーの MEI は chrome://media-engagement 内部ページで確認できます。

著者: Withoutmelv リンク: https://juejin.cn/post/7073119971735240734

オーディオとビデオの自動再生ソリューション