普通小游戏开发
开放能力(必读)
社交转发裂变
数据分析
视频拍摄器
API
多端支持

tt.createOffscreenVideo

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

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

语法

tt.createOffscreenVideo()

返回值

Video 对象

代码示例

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

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(video);
});

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

cc.Class({
    extends: cc.Component,

    onLoad() {
        this.showcamera();
    }
    update(dt) {
        if (this.video && this.videoTexture) {
            this.videoTexture.update({
                image: this.video,
                flipY: false
            });
        }
    }

    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 tt !== 'undefined') {
            this.playVideo();
        }
    }

    private playVideo() {
        this.video = tt.createOffscreenVideo();
        // 传入视频src
        this.video.src = videoSrc;
        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;
        })
    }
}

Bug & Tip

-Tip:暂无。

点击纠错
该文档是否对你的开发有所帮助?
有帮助
没帮助
该文档是否对你的开发有所帮助?
有帮助
没帮助