Laya使用VideoNode动态加载视频,可以自定义播放视频此处以及位置

csharp 复制代码
export class VideoCommand {
    video: Laya.VideoNode;

    public duration: number = 0;

    /**
       
        * @param videoPos 视频位置
        * @param videoSize 视频大小
    */
    public constructor(videoPos: Laya.Vector2, videoSize: Laya.Vector2) {


        this.video = new Laya.VideoNode;
        //添加到舞台  1是场景中的Sene2D,0是场景中Scene3D
        Laya.stage.getChildAt(1).addChild(this.video);
        this.video.size(videoSize.x, videoSize.y);
        this.video.pos(videoPos.x, videoPos.y); //设置到右上角
        this.video.visible = false;

    }


    /**
        * @param ready 视频准备就绪事件
    */
    public ReadyEvent(ready: () => void) {
        this.video.videoTexture.off("ready", this);
        this.video.videoTexture.on("ready", this, () => {
            console.log("视频准备就绪");
            ready?.();
        });
    }
    /**
     * 视频开始播放事件
        * @param playing 视频开始播放事件
    */
    public PlayingEvent(playing: () => void) {
        this.video.videoTexture.off("playing", this);
        this.video.videoTexture.on("playing", this, () => {
            console.log("视频开始播放");
            playing?.();
        });
    }
    /**
     * 视频播放完成事件
        * @param ended 视频播放完成事件
    */
    public EndedEvent(ended: () => void) {
        this.video.videoTexture.off("ended", this);
        this.video.videoTexture.on("ended", this, () => {
            console.log("视频播放完成");
            this.video.source = "";
            ended?.();
        });
    }


    /**
     * 设置视频位置
        * @param videoPos 视频位置
    */
    public SetVideoPos(videoPos: Laya.Vector2) {
        this.video.pos(videoPos.x, videoPos.y);
    }
    /**
     * 设置视频大小
        * @param videoSize 视频大小
    */
    public SetVideoSize(videoSize: Laya.Vector2) {
        this.video.size(videoSize.x, videoSize.y);
    }
    /**
     * 设置视频可见性
        * @param visible 是否可见
    */
    public SetVideoVisible(visible: boolean) {
        this.video.visible = visible;
    }
    /**
     * 播放视频
        * @param videoPath 视频路径
        * @param loop 是否循环播放
    */
    public playVideo(videoPath: string, loop: boolean) {
        this.video.visible = true;
        this.video.loop = loop;
        this.video.source = "resources/Media/" + videoPath;
        //设置视频帧率
        this.video.videoTexture.useFrame = true;
        this.video.videoTexture.updateFrame = 30;
        this.video.muted = false;
        this.video.reload();//重新加载视频
        this.video.play(); //开始播放

    }
    /**
     * 暂停视频
        * @param action 暂停视频回调
    */
    public PauseVideo(action: () => void) {
        this.video.pause();
        action?.();
    }
    /**
     * 获取视频时长
    */
    public Getduration() {
        return this.duration;
    }



    /**
     * 销毁视频
    */
    public DestroyVideo() {
        this.video.offAll();
        this.video.destroy();
    }
}

使用方法

javascript 复制代码
const { regClass, property } = Laya;

//这个是视频脚本的路径
import { VideoCommand } from "../Tool/VideoCommand";

@regClass()
export class Test extends Laya.Script{
   
    public Start() {
       
 let videoCommand = new VideoCommand(new Laya.Vector2(0, 0), new Laya.Vector2(1600, 900));
                videoCommand.playVideo("resource路径下的视频路径", false);
                videoCommand.EndedEvent(() => {});
    }
   


  
}
相关推荐
蓝瑟几秒前
告别重复造轮子!业务组件多场景复用实战指南
前端·javascript·设计模式
dorisrv22 分钟前
高性能的懒加载与无限滚动实现
前端
韭菜炒大葱28 分钟前
别等了!用 Vue 3 让 AI 边想边说,字字蹦到你脸上
前端·vue.js·aigc
StarkCoder40 分钟前
求求你,别在 Swift 协程开头写 guard let self = self 了!
前端
清妍_40 分钟前
一文详解 Taro / 小程序 IntersectionObserver 参数
前端
电商API大数据接口开发Cris1 小时前
构建异步任务队列:高效批量化获取淘宝关键词搜索结果的实践
前端·数据挖掘·api
符方昊1 小时前
如何实现一个MCP服务器
前端
喝咖啡的女孩1 小时前
React useState 解读
前端
渴望成为python大神的前端小菜鸟1 小时前
浏览器及其他 面试题
前端·javascript·ajax·面试题·浏览器
1024肥宅1 小时前
手写 new 操作符和 instanceof:深入理解 JavaScript 对象创建与原型链检测
前端·javascript·ecmascript 6