在Cocos Creator中集成

152 次浏览 2026年 6月 1日下午10:01

NodePlayer.js 支持在CocosCreator 3.8中进行集成，开发视频直播小游戏，如远程抓娃娃机，割绳子喂鱼，远程打气球、打易拉罐等等。超低延迟让用户有及时操作感，成熟稳定，集成方便。

## 特性
* 当前使用Cocos Creator 3.8.8
* 支持最新高性能WASM版，可以开启WebCodecs硬件解码。
* 支持H.264/H.265视频编码
* 支持aac/g.711音频编码
* 支持worker解码释放主线程运行压力

## 集成步骤

### 1.开发阶段，在CocosCreator中创建预览模板
点击菜单->项目->创建web预览模板
这一步操作将会在项目目录内创建preview-template目录和 index.ejs文件
### 2.复制程序
- 将开发包内NodePlayer.min.js，NodePlayer.min.wasm 拷贝到项目文件夹 preview-template内
- 将开发包内NodePlayer.min.d.ts 拷贝到项目文件夹assets内

### 3.修改入口文件preview-template/index.ejs
``` html
        <link rel="stylesheet" type="text/css" href="./index.css" />
        <script src="./NodePlayer.min.js" ></script>
    </head>
```
> 在` </head>`之前添加`<script src="./NodePlayer.min.js" ></script>`

### 4.创建视频播放组件
在assets上点右键->Create->TypeScropt ，命名为VideoComponent
![](https://www.nodemedia.cn/wp-content/uploads/2026/06/QQ20260601-100707.png)

### 5.编写视频播放组件
用编辑器如vscode打开VideoComponent，内容如下
```ts
import { _decorator, Component, Node } from 'cc';
import { ImageAsset, Texture2D, UITransform, math } from 'cc';
import { RenderTexture, SpriteFrame, Sprite } from 'cc';

const { ccclass, property } = _decorator;

@ccclass('VideoComponent')
export class VideoComponent extends Component {
    canvas: HTMLCanvasElement;
    texture: Texture2D;
    sp: Sprite;
    np: NodePlayer;

protected async onLoad() {
        this.sp = this.node.getComponent(Sprite);
        this.creat_canvas();

await NodePlayer.asyncLoad();

this.np = new NodePlayer();
        this.np.setView(this.canvas.id, false);
        this.np.setScaleMode(1);
        this.np.on("videoFrame", () => {
            const img = new ImageAsset(this.canvas);
            const sf = new SpriteFrame();

if (this.texture) {
                this.texture.destroy();
                this.texture = null;
            }

this.texture = new Texture2D();
            this.texture.image = img;
            sf.texture = this.texture;
            this.sp.spriteFrame = sf;
        });
    }

creat_canvas() {
        this.canvas = document.createElement('canvas');
        this.canvas.id = "canvas_" + Date.now()
        this.canvas.width = this.getComponent(UITransform).width;
        this.canvas.height = this.getComponent(UITransform).height;
        this.canvas.hidden = true;
        this.canvas.style.visibility = "hidden";
        this.canvas.style.display = "none";
        document.body.appendChild(this.canvas);
    }

start() {
		// 根据实际情况填入播放地址
        this.np.start("http://live.nodemedia.cn:8000/live/bbb_264.flv");
    }

onDestroy() {
        if (this.np) {
            this.np.stop();
            this.np.release(true);
            this.np = null;
        }

if (this.canvas && this.canvas.parentNode) {
            this.canvas.parentNode.removeChild(this.canvas);
            this.canvas = null;
        }

if (this.texture) {
            this.texture.destroy();
            this.texture = null;
        }
    }
}
```
>实际开发根据需求调整代码结构，当前逻辑为载入场景时自动播放视频

### 6.创建播放精灵
在场景下右键点击->Create->2D Object ->SpriteSplash

![](https://www.nodemedia.cn/wp-content/uploads/2026/06/QQ20260601-100248.png)

### 7.关联精灵和组件
CocosCreator中选中之前创建的精灵，在右侧属性中点击Add Component，选中创建的脚本VideoComponent.ts
![](https://www.nodemedia.cn/wp-content/uploads/2026/06/QQ20260601-101428.png)

### 8.运行效果
![](https://www.nodemedia.cn/wp-content/uploads/2026/06/QQ20260601-101917.jpg)

### 9.编译发布
- 桌面端项目: 点击菜单->项目->创建编译模板->Web Desktop
- 移动端项目: 点击菜单->项目->创建编译模板->Web Mobile

将开发包内NodePlayer.min.js，NodePlayer.min.wasm 拷贝到项目文件夹

- build-templates/web-desktop
- build-templates/web-mobile

并修改index.ejs
``` html
        <link rel="stylesheet" type="text/css" href="./index.css" />
        <script src="./NodePlayer.min.js" ></script>
    </head>
```
> 在` </head>`之前添加`<script src="./NodePlayer.min.js" ></script>`

### 10.编辑后的项目运行效果：
![](https://www.nodemedia.cn/wp-content/uploads/2026/06/QQ20260601-103602.jpg)

## 开发注意
当前集成模式仅支持 Web开发方式

## 请联系客服索取demo源码
QQ: 281269007
Email : service@nodemedia.cn
扫码加我微信：
![](https://www.nodemedia.cn/wp-content/uploads/2022/11/wechat.jpg)

文档

在Cocos Creator中集成