2024/10/17 14:17:33

媒体播放器

本文介绍如何调用媒体播放器相关的 API 播放本地或在线媒体资源，或将媒体资源分享给声网频道内的远端用户。

前提条件

在进行操作之前，请确保你已经在项目中实现了基本的实时音视频功能。有关详细信息，请参考实现音视频互动。

实现方法

参考如下步骤，在你的项目中使用媒体播放器：

初始化 IRtcEngine 后，创建一个 IMediaPlayer 对象。

TypeScript
// 创建并初始化引擎
let rtcEngine = createAgoraRtcEngine();
rtcEngine.initialize({
  appId,
});
// 创建媒体播放器对象
let mediaPlayer = rtcEngine.createMediaPlayer();

调用 registerPlayerSourceObserver 方法注册播放观测器。
TypeScript
```
// 注册播放观测器
mediaPlayer.registerPlayerSourceObserver(this);
```

根据你的需求，你可以注册以下媒体播放器观测器的回调：

onPlayerSourceStateChanged：报告播放器状态改变。
onPositionChanged：报告当前媒体文件的播放进度。
onPlayerEvent：报告播放器事件。

TypeScript
const EventHandles = {
    // 报告播放器状态改变
    onPlayerSourceStateChanged: (state, ec) {
        console.log(`state:${state}, ec:${ec}`);
    };
    
    // 报告当前媒体文件的播放进度
    onPositionChanged: (position) {
        console.log(`position:${position}`);
    };
    
    // 报告播放器事件
    onPlayerEvent: (
        eventCode,
        elapsedTime,
        message
    ) {
        console.log(
        `eventCode:${eventCode},
        elapsedTime:${elapsedTime},
        message:${message}`
        );
    };
    };
// 添加主回调事件
rtcEngine.registerEventHandler(EventHandles);

调用 open 打开本地或在线媒体文件。

TypeScript
open = () => {
const url = 'https://example/video.mov';
if (!url) {
    this.error("url is invalid");
}
mediaPlayer.open(url, 0);
};

调用 play 播放媒体文件。

TypeScript
// 播放媒体文件
play = () => {
const { position, duration } = this.state;
if (position === duration && duration !== 0) {
    mediaPlayer.seek(0);
} else {
    mediaPlayer.play();
}
};
// 暂停播放媒体文件
pause = () => {
mediaPlayer.pause();
};
// 恢复播放媒体文件
resume = () => {
mediaPlayer.resume();
};

停止播放并释放资源。

TypeScript
// 停止播放
mediaPlayer.stop();
// 销毁媒体播放器
rtcEngine.destroyMediaPlayer(this.player);
// 取消注册播放观测器
rtcEngine.unregisterEventHandler(this);

参考信息

示例项目

声网提供了开源的实现媒体播放器示例项目供你参考，你可以前往下载或查看其中的源代码。

MediaPlayer

前提条件​

实现方法​

参考信息​

示例项目​

API 参考​

前提条件

实现方法

参考信息

示例项目

API 参考