拉流事件监听--视频直播-火山引擎

文档中心

立即注册

视频直播

请输入

功能集成

拉流事件监听

本文介绍如何使用 Web 拉流 SDK（VePlayer）监听播放相关事件，适用于集成播放器状态监控、日志记录或 UI 状态联动等业务场景。

适用版本

本文档适用于最新版本的 Web 拉流 SDK，版本信息请参考发布历史，历史版本请参考历史文档。

前提条件

已完成 SDK 集成。

配置示例

VePlayer 支持多种播放事件，您可监听如 PLAY（播放开始）、ERROR（播放错误）、PAUSE（播放暂停）等事件，以实现 UI 状态联动、异常处理等逻辑。完整事件列表请参考事件文档。
直播播放器创建成功后，可调用 on、once 方法绑定事件监听，代码示例如下：

通过 CDN 集成

通过 NPM 集成

VePlayer.createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://pulldomain/appname/mystream.m3u8',
  logger: {
    appId: '5****8',
  },
}).then(function (veplayer) {
  function eventHandler(data) {
    console.log('监听事件的回调数据', data);
  }
  // 监听指定事件
  veplayer.on(VePlayer.live.Events.PLAY, eventHandler);
  // 监听指定事件，事件处理函数只执行一次
  veplayer.once(VePlayer.live.Events.PLAY, eventHandler);
  // 解绑或移除指定事件的事件监听
  veplayer.off(VePlayer.live.Events.PLAY, eventHandler);
  // 解绑或移除所有事件监听。
  veplayer.offAll();
});

import { createLivePlayer, register, live} from '@volcengine/veplayer'
import { hlsjs } from '@volcengine/veplayer-plugin'
import '@volcengine/veplayer/style'

register([hlsjs]);

createLivePlayer({
  width: 640,
  height: 360,
  url: 'https://pulldomain/appname/mystream.m3u8',
  logger: {
      appId: '5****8',
  },
}).then(function (veplayer) {
  function eventHandler(data) {
      console.log('监听事件的回调数据', data);
  }
  // 监听指定事件
  veplayer.on(live.Events.PLAY, eventHandler);
  // 监听指定事件，事件处理函数只执行一次
  veplayer.once(live.Events.PLAY, eventHandler);
  // 解绑或移除指定事件的事件监听
  veplayer.off(live.Events.PLAY, eventHandler);
  // 解绑或移除所有事件监听。
  veplayer.offAll();
});

最近更新时间：2025.08.11 16:52:48

这个页面对您有帮助吗？

有用

无用