这份网站视频观看人数代码2024示例，适合接入高清视频在线播放服务：观众从视频入口选片、点击播放或切换清晰度时，可以在播放器旁查看当前观看人数。实现由人数显示区、定时请求和站内统计接口组成；代码里的接口地址仅作示例，不依赖外部服务。这里的“实时”指按设定间隔刷新，并非每一帧都同步变化。

观看人数显示与统计口径

人数可放在播放器标题或播放状态栏旁，显示为“正在观看 128 人”。这个数字应代表仍处于活跃状态的观看会话，不是视频累计播放次数。观众进入播放区、开始播放或离开时，当前人数会随统计结果变化；累计播放次数则记录一段时间内发生过的播放。把两种数字分别标注，能避免观众将实时人数误看成总播放量。

高清播放时，人数区域宜保持简洁：文字标签说明统计口径，数字使用醒目字重，单位紧跟数字。接口暂时无响应时显示“暂不可用”，不要把旧数字继续伪装成当前结果；播放器仍可正常使用，人数提示也不会盖住画面。

播放器人数显示代码

将以下展示区放进播放器信息栏。它只负责呈现数字，不会自行统计真实观众：

<div class="player-meta" aria-live="polite">
  <span>正在观看</span>
  <strong id="viewer-count">--</strong>
  <span>人</span>
</div>

可以把这段代码放在视频标题、清晰度标识或播放状态旁。“--”表示统计结果尚未返回；接口响应后，前端会用实际人数替换它。窄屏观看时，可将人数提示移到播放器下方，避免挤占视频画面。

接入参数

以下参数组成一套可调整的示例配置。实际使用时，应让接口路径、统计口径和刷新周期与站内服务保持一致。

定时刷新代码

前端通过站内接口读取人数，示例每 15 秒请求一次。刷新频率越高，数字变化越及时，同时也会增加接口请求量；可按观众规模和服务端承载能力调整。

const countNode = document.getElementById("viewer-count");
const countUrl = "/api/video/online-count?videoId=demo-001";
let refreshing = false;

async function refreshCount() {
  if (!countNode || refreshing) return;
  refreshing = true;

  try {
    const response = await fetch(countUrl, { cache: "no-store" });
    if (!response.ok) throw new Error("count request failed");

    const data = await response.json();
    const count = Number(data.online);

    if (!Number.isSafeInteger(count) || count < 0) {
      throw new Error("invalid count");
    }

    countNode.textContent = count.toLocaleString("zh-CN");
  } catch {
    countNode.textContent = "暂不可用";
  } finally {
    refreshing = false;
  }
}

refreshCount();
setInterval(refreshCount, 15000);

代码读取返回对象中的 online 字段，并将非负整数格式化后显示。refreshing 用来阻止上一次请求尚未结束时重复发起请求；若请求失败或返回值无效，人数区域会提示“暂不可用”。浏览器在后台标签中可能降低定时器执行频率，因此刷新间隔是目标值，不保证每次都恰好在 15 秒时完成。

接口返回示例

服务端可针对当前视频返回一个 JSON 对象：

{
  "videoId": "demo-001",
  "online": 128
}

videoId用于区分视频，online代表符合统计规则的活跃观看人数。服务端可依据会话、播放状态和心跳记录更新数字。关闭播放区、切换视频或停止活动的会话，应在设定时限后退出统计；若每次打开入口都永久增加一人，数字便会持续虚高。

观看人数与播放状态对比

页面文案应与实际采用的口径相符。暂停、缓冲和后台播放是否继续计入，可由服务端统一设定保留时长。对同一用户短时间内反复刷新，也应按会话或临时标识去重，避免一次观看被计成多个观众。访问量较大时可以使用短时缓存，但缓存时长应与期望的刷新及时程度相匹配。

高清在线播放时的呈现方式

人数数字适合放在播放器周边，不宜压在画面中央。桌面观看时，可将它与视频标题、清晰度和播放状态并列；窄屏观看时，则放在播放器下方。数字改变时使用轻微提示即可，不必频繁闪烁或加入大幅动画。统计结果为零时显示“0 人”；接口没有可用结果时显示“暂不可用”，两种状态应明确区分。

这套网站视频观看人数代码2024包含展示区、定时刷新逻辑和服务端统计接口。前端负责读取并显示人数，服务端负责判断哪些会话仍处于观看状态。按实际播放流程接入后，观众能在选择视频、开始高清播放和切换清晰度时查看人数；站点运营者也可以按需要调整刷新周期、活跃会话规则和异常提示。