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


  
}
相关推荐
+VX:Fegn08954 小时前
计算机毕业设计|基于springboot + vue蛋糕店管理系统(源码+数据库+文档)
前端·数据库·vue.js·spring boot·课程设计
Nicander5 小时前
我给 Excalidraw 做了一个本地工作区:DrawSpace
前端·开源
linux_cfan7 小时前
17 · 引擎适配器全景:HLS/DASH/Vimeo/Mux/Cast
前端·javascript·音视频
计算机魔术师8 小时前
烧掉2780亿美元还不够?OpenAI的资本豪赌让人头皮发麻
前端
IT_陈寒8 小时前
Java线程池用错参数,我的服务居然悄悄崩溃了
前端·人工智能·后端
卡布鲁9 小时前
React useMemo 与 useCallback 完全指南:原理、场景与避坑
前端·react.js
碳基修炼9 小时前
排查记:本地 devServer 是 http,浏览器却把 302 重定向升级成了 https
前端·http
步行cgn9 小时前
Spring p 命名空间注入详解
java·前端·spring
何何____9 小时前
Vue 生命周期详解
前端·javascript
江米小枣tonylua9 小时前
TypeScript 全面の拥抱 !Prisma 8 + Electron 升级实战
前端