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;
}
}