まず、Chrome ブラウザの自動再生ポリシーとは何ですか? （原理の説明、原理が分かれば問題は非常に簡単に解けます）

1. 生活シーンでの事例

2. Chrome の自動再生戦略

3. メディアエンゲージメントとは何ですか

2: ケースデモンストレーション (シチュエーションを再生することはできません)

1.自動再生属性を使用する

2. js を使用してビデオが自動的に再生されるように制御します

3. これはなぜですか?

3. 解決策

1. ユーザーが対話できるようガイドする

2. まず再生をミュートし、ユーザーがサウンドを制御できるようにします。

まず、Chrome ブラウザの自動再生ポリシーとは何ですか? （原理の説明、原理が分かれば問題は非常に簡単に解けます）

1. 生活シーンでの事例

質問させてください。仕事中に釣りをしていて、Douyin または Bilibili を使用する準備をしているが、音量を下げるのを忘れたり、ヘッドフォンを着用するのを忘れたりした場合、突然のビデオの音で特に恥ずかしい思いをしますか? 周りに人がいる場合それを見て、普通の動画を載せれば大丈夫、そうでなければチュンチュン大社は死んでいる。

そこで 2018 年、Chrome は主にユーザーエクスペリエンスを考慮したこの自動再生戦略を提案しました。

2. Chrome の自動再生戦略

サイレントモードでは常に自動再生を許可する
以下の場合、音声付きの再生が許可されます。

① ユーザーは現在のドメインと対話しました (つまり、クリック、タップイベント)。

② デスクトップデバイス上で、ユーザーのメディア参加指数のしきい値を超えています。これは、ユーザーが以前に音声付きのビデオを再生したことがあるということを意味します。

③ユーザーがモバイルデバイスのホーム画面にWebサイトを追加したか、デスクトップへのPWAのインストールを許可しました。
上部のフレームは自動再生許可をその iframe に委任して、サウンドの自動再生を許可できます。

3. メディアエンゲージメントとは何ですか

メディアエンゲージメントとは、ユーザーがメディアコンテンツと対話する度合いを指し、複数の指標で測定できます。これらの指標には主に、視聴時間、視聴率、コンバージョン率、インタラクティブ行動などが含まれます。Chrome にはこのメディアエンゲージメントに基づいた独自のアルゴリズムがあり、chrome://media-engagement/ から表示できます。

2: ケースデモンストレーション (シチュエーションを再生することはできません)

1.自動再生属性を使用する

ボックスを使用してビデオタグを配置し、自動再生属性を追加するだけです

<div class="box">
    <video src="./img/_12084f25eab2e6978b505b0520b978b-1-64.MP4" autoplay></video>
  </div>

autoplay 属性を設定しているにもかかわらず、ビデオを再生できないことがわかります (再生できる場合は、数回更新を試みることができますが、自動的には再生されません。具体的な理由は不明です)。つまり、常にそれを確保する必要があります（ニーズに応じて実行できます）

この時点で、コンソールにエラーがあるかどうかを確認できます。

コンソールがエラーを報告したことがわかります。このエラーメッセージは、おそらくユーザーがこのビデオを初めて操作していないため、自動再生に失敗したことを意味します。

Youdao も翻訳すると同様の意味であることがわかります。

2. js を使用してビデオが自動的に再生されるように制御します

jsコードも非常にシンプルです

  const video = document.querySelector('video')
  video.play()

ただし、 play() メソッドは何の役割も果たしません (自動再生を数回更新できる場合は、これが制御不能であることがわかります)。

3. これはなぜですか?

メディアエンゲージメントを確認するには、chrome://media-engagement/ を参照してください。

現在の Web ページのスコアが最低であることがわかります。そのため、Chrome ブラウザでは自動的にプレイすることができません。サイレントプレイを考える人もいるかもしれません。はい、これは非常に主流の現代的なものです。解決策は次のとおりです。以下で説明します。

3. 解決策

1. ユーザーが対話できるようガイドする

この原理を理解すると、自然に解決策を考えることができます。ユーザーに操作してもらいたいので、操作させて、再生を制御するボタンを設定できます。

  <div class="box">
    <video src="./img/_12084f25eab2e6978b505b0520b978b-1-64.MP4" autoplay></video>
    <div class="model">
      <button>开始播放</button>
    </div>
  </div>

このボタンを制御する関数を書くことができます

  const model = document.querySelector('.model')
  const btn = document.querySelector('button')
  // 第一种方法 引导用户去与页面交互实现播放
  async function play() {
    try {
      await video.play(); 
      //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
      model.style.display = 'none';
      btn.removeEventListener('click', play);
      // 如果他自动播放了就隐藏按钮，消除点击事件
    } catch (err) {
      model.style.display = 'block';
      btn.addEventListener('click', play);
      // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
    }
  }
  play();

コードにはすでに非常に詳細なコメントが含まれているため、あまり説明しません。主なアイデアは、ユーザーが対話できるようにガイドすることです。対話の後、メソッドを呼び出すと、メソッドが再生できるようになります。前の分析を通じてという原理で、を知ることができます。

2. まず再生をミュートし、ユーザーがサウンドを制御できるようにします。

この方法は現在、Douyin、Station B などの多くの Web ページで使用されています。

制御する関数を作成する場合も同様です。

  //第二种方法比较主流，类似的有网页版抖音以及B站
  function play() {
    video.muted = true;//设置视频为静音
    video.play();//调用播放方法
    const ctx = new AudioContext();
    const canAutoPlay = ctx.state === 'running'; 
    //通过这个可以判断出视频能不能够自动播放 如果可以它的值就是“running” 否则为"suspended"
    // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
    ctx.close();
    if (canAutoPlay) {
      video.muted = false;
      model.style.display = 'none';
      btn.removeEventListener('click', play);
    }
    else {
      model.style.display = 'block';
      btn.addEventListener('click', play);
    }
  }
  play()

コード内にはすでに詳細なコメントがあり、実装の考え方は以前に進めた原理と同様です。再生をミュートすることができるため、最初に再生をミュートしてから、ユーザーの操作を誘導します。

実際、原理を理解していれば、問題を解決するのは非常に簡単であることがわかります。

ご質問がある場合は、プライベートメッセージを送信するか、メッセージを残してください

詳細コード:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 
    Chrome 浏览器的视频自动播放策略
    1.始终允许静音模式下自动播放
    2.在以下的情况中，带声音播放会被允许：
      ①用户已经与当前的域进行了交互（也就是click，tap事件）。
      ②在桌面设备上，用户的媒体参与度指数阈值已经超过，这意味着用户之前播放过有声视频。
      ③用户已经将网站添加到移动设备上的主屏幕或允在桌面上安装了PWA。
    3.顶部帧可以将自动播放权限委派给其iframe，来允许自动播放声音
    
    媒体参与度（Media Engagement）是指用户与媒体内容进行互动的程度，可以通过多个指标来衡量。这些指标主要包括观看时间、观看率、转化率、交互行为等。
    可以通过：chrome://media-engagement/ 查看
   -->
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      display: flex;
      justify-content: center;
    }

    video {
      width: 800px;
      height: 600px;
    }

    .box {
      position: relative;
    }

    .box button {
      width: 80px;
      height: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      border: none;
      background-color: rgb(61, 196, 230);
      transform: translate(-50%);
      color: #fff;
      border-radius: 10px;
    }

    .box button:hover {
      cursor: pointer;
    }
  </style>

</head>

<body>
  <div class="box">
    <video src="./img/_12084f25eab2e6978b505b0520b978b-1-64.MP4" autoplay></video>
    <div class="model">
      <button>开始播放</button>
    </div>
  </div>
</body>
<script>
  const video = document.querySelector('video')
  console.log(video.play());

  const model = document.querySelector('.model')
  const btn = document.querySelector('button')
  // 第一种方法 引导用户去与页面交互实现播放
  async function play() {
    try {
      await video.play();
      //使用await的原因是因为video.play()方法返回的是一个Promise,所以在这里我们可以对他进行一些处理
      model.style.display = 'none';
      btn.removeEventListener('click', play);
      // 如果他自动播放了就隐藏按钮，消除点击事件
    } catch (err) {
      model.style.display = 'block';
      btn.addEventListener('click', play);
      // 如果Promise返回的是error就引导用户点击按钮，在调用play方法
    }
  }
  play();

  //第二种方法比较主流，类似的有网页版抖音以及B站
  function play() {
    video.muted = true;//设置视频为静音
    video.play();//调用播放方法
    const ctx = new AudioContext();
    const canAutoPlay = ctx.state === 'running'; //通过这个可以判断出视频能不能够自动播放 如何可以它的值就是“running” 否则为"suspended"
    // 如果是不能播放我们就执行下面的逻辑，其实就是类似于第一种方法，让用户与其交互
    ctx.close();
    if (canAutoPlay) {
      video.muted = false;
      model.style.display = 'none';
      btn.removeEventListener('click', play);
    }
    else {
      model.style.display = 'block';
      btn.addEventListener('click', play);
    }
  }
  play()
</script>

</html>

まず、Chrome ブラウザの自動再生ポリシーとは何ですか? （原理の説明、原理が分かれば問題は非常に簡単に解けます）

1. 生活シーンでの事例

2. Chrome の自動再生戦略

3. メディアエンゲージメントとは何ですか

2: ケースデモンストレーション (シチュエーションを再生することはできません)

1.自動再生属性を使用する

2. js を使用してビデオが自動的に再生されるように制御します

3. これはなぜですか?

3. 解決策

1. ユーザーが対話できるようガイドする

2. まず再生をミュートし、ユーザーがサウンドを制御できるようにします。

おすすめ