You need to enable JavaScript to run this app.
导航
Web 端自动播放策略
最近更新时间:2023.12.12 20:59:47首次发布时间:2022.09.01 10:48:22

大部分浏览器的自动播放策略(Autoplay policy),都要求用户至少进行一次交互操作才能播放带声音的视频。这是因为,用户通常不希望一个刚刚打开的网页毫无预警地发出声音。
此外,还有部分浏览器不允许纯视频自动播放。例如,低电量模式下的 iOS Safari 浏览器和 iOS 端的微信内嵌浏览器。详见浏览器厂商的自动播放策略
这意味着,在用户交互前,自动播放或手动调用 play 接口播放音视频都可能失败,导致无声问题或看不到视频。
因此,在开发 Web 端 RTC 应用时,需要通过引导用户交互来处理浏览器的自动播放策略的限制,参考以下的两种方案。

方案一:监听播放失败回调,引导用户进行交互

创建 RTC 引擎后,默认自动播放音视频,即,无需手动调用 play 接口,音视频可在解码成功后自动播放。当监听到 onAutoPlayFailed 回调时,表示有自动播放失败的流。此时,创建按钮提示和引导用户与页面发生交互来恢复播放。

import VERTC from '@volcengine/rtc';
const engine = VERTC.createEngine('appId')
// ...
engine.on(VERTC.events.onAutoplayFailed, e => {
  const button = document.createElement("button");
  button.innerText = "Click to play";
  button.onclick = () => {
    button.remove();
    engine.play(e.userId); //不传 user ID 代表播放本地用户的媒体流
  };
  document.body.append(button);
});

方案二:引导用户在播放前进行交互

大部分浏览器在用户交互后,可解除自动播放限制。但由于无法通过 JavaScript 感知浏览器是否已经解除自动播放限制。此方案中,需要在开始播放前,引导用户进行交互,保证媒体流成功自动播放。

  1. 根据不同的浏览器的自动播放限制,在调用 createEngine 时选择的 RTC SDK 的自动播放政策,并使用相应的 UI 设计文案。
  • VIDEO_ONLY 只自动播放视频,不播放音频:例如 Chrome 浏览器,允许无声视频自动播放。交互按钮名称举例:“解除静音”。
  • PLAY_MANUALLY 关闭自动播放:例如 iOS 端的 Safari 浏览器、微信浏览器和微信小程序的 Webview 这类对自动播放限制较为严格的浏览器,要求用户交互后才放音视频播放。交互按钮名称举例:“开始播放”。
  1. 各浏览器厂商对于自动播放策略的实现存在差异,即使提前引导用户与页面产生交互,也不能确保不会出现自动播放失败错误。因此,监听播放失败回调后的处理也是不可缺少的。

对于手动播放策略,参考以下说明处理用户状态显示和交互请求。

  1. 远端用户图标默认显示静音状态提示。
<div id="user1" data-user-id="{userId}">已静音</div>
  1. 当用户点击某个远端用户的图标时,在按钮的点击/触摸事件的回调中播放这个用户的媒体流,并更改状态提示。
import VERTC, { RTCAutoPlayPolicy } from '@volcengine/rtc';
const engine = VERTC.createEngine('appId', { 
  autoPlayPolicy: RTCAutoPlayPolicy.PLAY_MANUALLY 
});
let playing = false;
// ...
//播放音频流
document.getElementById("user1").onclick = (e) => {
  if (playing) {
      return;
  }
  const userId = e.target.getAttribute('data-user-id')
  engine.play(userId);
  playing = true;
  e.target.innerHTML = "播放中";
}

参考文档

一些主流浏览器的自动播放策略: