文档中心

实时音视频

请输入

集成相关

Web 端自动播放策略

大部分浏览器的自动播放策略（Autoplay policy），都要求用户至少进行一次交互操作才能播放带声音的视频。这是因为，用户通常不希望一个刚刚打开的网页毫无预警地发出声音。

此外，还有部分浏览器不允许纯视频自动播放。例如，低电量模式下的 iOS Safari 浏览器和 iOS 端的微信内嵌浏览器。详见浏览器厂商的自动播放策略。

这意味着，在用户交互前，自动播放或手动调用 play 接口播放音视频都可能失败，导致无声问题或看不到视频。

因此，在开发 Web 端 RTC 应用时，需要通过引导用户交互来处理浏览器的自动播放策略的限制，参考以下的两种方案。

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

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

import VERTC from '@volcengine/rtc';​
const engine = VERTC.createEngine('<YOUR_APP_ID>')​
// ...​
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 感知浏览器是否已经解除自动播放限制。此方案中，需要在开始播放前，引导用户进行交互，保证媒体流成功自动播放。

根据不同的浏览器的自动播放限制，在调用 createEngine 时选择的 RTC SDK 的自动播放政策，并使用相应的 UI 设计文案。

VIDEO_ONLY 只自动播放视频，不播放音频：例如 Chrome 浏览器，允许无声视频自动播放。交互按钮名称举例：“解除静音”。

PLAY_MANUALLY 关闭自动播放：例如 iOS 端的 Safari 浏览器、微信浏览器和微信小程序的 Webview 这类对自动播放限制较为严格的浏览器，要求用户交互后才放音视频播放。交互按钮名称举例：“开始播放”。

各浏览器厂商对于自动播放策略的实现存在差异，即使提前引导用户与页面产生交互，也不能确保不会出现自动播放失败错误。因此，监听播放失败回调后的处理也是不可缺少的。

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

远端用户图标默认显示静音状态提示。

{userId}：需替换为远端用户的真实 ID

<div id="user1" data-user-id="{userId}">已静音</div>

当用户点击某个远端用户的图标时，在按钮的点击/触摸事件的回调中播放这个用户的媒体流，并更改状态提示。

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 = "播放中";
}

参考文档

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

Chrome

Safari

Firefox

最近更新时间：2026.07.29 15:15:57

这个页面对您有帮助吗？

有用

无用