Creator 视频显示在普通的精灵上

import VideoModel from "../../app/course/sequenceTask/models/VideoModel";

 

const {ccclass, property, requireComponent} = cc._decorator;

@ccclass

@requireComponent(cc.Sprite)

export default class CanvasVideo extends cc.Component {

 

    @property(cc.VideoPlayer)

    videoPlayer: cc.VideoPlayer = null;

 

    private _texture: cc.Texture2D;

    private _canvas: HTMLCanvasElement;

    private _canvasCtx: CanvasRenderingContext2D;

    private _sprite: cc.Sprite;

 

    private spriteFrameCache: cc.SpriteFrame[] = [];

    private index = 0;

 

    start() {

        this.init(this.videoPlayer);

    }

 

    init(videoPlayer: cc.VideoPlayer) {

        if (videoPlayer !== this.videoPlayer) {

            this.videoPlayer = videoPlayer;

        }

 

        let canvas: HTMLCanvasElement = document.createElement('canvas');

        canvas.width = this.node.width;

        canvas.height = this.node.height;

 

        this._canvas = canvas;

        this._canvasCtx = canvas.getContext('2d');

        this._sprite = this.getComponent(cc.Sprite);

        this._texture = new cc.Texture2D();

 

        for (let i = 0; i < 2; i++) {

            this.spriteFrameCache.push(new cc.SpriteFrame());

        }

        this.schedule(this.updateTexture, 1 / 25, cc.macro.REPEAT_FOREVER);

    }

 

    private updateTexture(): void {

        if (!this.videoPlayer) { return; }

 

        let video: HTMLVideoElement = this.videoPlayer['_impl']._video;

        this._canvasCtx.drawImage(video, 0, 0, this.node.width, this.node.height);

        this._texture.initWithElement(this._canvas);

 

        let spriteFrame = this.spriteFrameCache[this.index];

        spriteFrame.setTexture(this._texture);

        this._sprite.spriteFrame = spriteFrame;

 

        this.index = this.index ^ 1;

    }

 

    clearSprite() {

        this._sprite.spriteFrame = null;

    }

}