- API 概览
- 开放能力
- 基础
- 渲染
- 设备
- 文件
- 位置
- 媒体
- 网络
- 游戏转发分享
- 实时语音
- 数据缓存
- 系统
- 广告
- 界面
- 支付
- Worker
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;
});
}
}
Bug & Tip
无
点击纠错