tt.createOffscreenVideo
收藏
我的收藏

基础库 1.37.0 开始支持本方法，这是一个同步方法。

创建一个离屏视频对象，与上屏视频对象自动绘制视频不同，离屏对象需要自行绘制。

语法

Plain Text复制
tt.createOffscreenVideo()

返回值

Video 对象

代码示例

【代码示例 1】：离屏 video 渲染到指定 canvas

js复制
let canvas = tt.createCanvas();
let context = canvas.getContext("2d");
let video = tt.createOffscreenVideo();
video.src = "xxxxxx"; //这里传入要播放的视频的路径，可以是tt开头本地路径也可以是其他网络路径
video.onCanplay(() => {
  video.play();
  function drawVideo() {
    requestAnimationFrame(drawVideo);
    // 离屏video需要绘制
    video.paintTo(canvas, 0, 0, 0, 0, video.width, video.height);
  }
  drawVideo();
});

【代码示例 2】：离屏 video 作为纹理在 cocos 上下文渲染

TypeScript复制

@ccclass
export default class HomeLogic extends cc.Component {
  onLoad() {
    this.showCamera();
  }
  update() {
    if (this.video && this.videoTexture) {
      this.videoTexture.update({
        image: this.video,
        // ...
      });
    }
  }

  private cameraNode;
  private video;
  private videoTexture: cc.Texture2D;

  private showCamera() {
    this.cameraNode = new cc.Node();
    this.cameraNode.addComponent(cc.Sprite);
    this.node.insertChild(this.cameraNode, 0);
    if (typeof globalThis.tt !== "undefined") {
      this.playVideo();
    }
  }

  private playVideo() {
    this.video = globalThis.tt.createOffscreenVideo();
    // 传入视频src
    this.video.src = "your video url";
    this.video.onCanplay(() => {
      this.video.play();
      this.videoTexture = new cc.Texture2D();
      this.videoTexture.initWithElement(this.video);
      this.videoTexture.handleLoadedTexture();
      this.cameraNode.getComponent(cc.Sprite).spriteFrame = new cc.SpriteFrame(
        this.videoTexture
      );
      this.cameraNode.width = cc.view.getVisibleSize().width;
      this.cameraNode.height =
        (this.video.videoHeight / this.video.videoWidth) *
        this.cameraNode.width;
    });
  }
}