LayaAir使用原生Video視頻播放以及Video監聽事件


1.原生Video的基本屬性

src :視頻的屬性,url地址
poster:視頻封面,沒有播放時顯示的圖片
preload:預加載|none|metadata(部分預加載)|auto。默認為auto
autoplay:自動播放
loop:循環播放
controls:瀏覽器自帶的控制條
width:視頻寬度
height:視頻高度

2.原生video標簽隱藏dom元素  ,可隱藏不可以修改

 

 3.Laya使用原生Video視頻播放的類代碼如下

var WebGL = laya.webgl.WebGL;
Laya.init(600, 400, WebGL);

class Video extends Laya.Sprite{
    constructor(){
        super();
        this.creatVideo();
    }

    creatVideo(){
        let divElement = Laya.Browser.createElement("div");
        divElement.className = "div";
        Laya.Browser.document.body.appendChild(divElement);         
        Laya.Utils.fitDOMElementInArea(divElement,this , 0, 0, Laya.stage.width, Laya.stage.height); 
        this.divElement = divElement;
        // this.divElement.style.display = "none";

        // 創建Video元素
        let videoElement = Laya.Browser.createElement("video");
        videoElement.setAttribute("id", "myvideo");
        this.videoElement = videoElement;      
        videoElement.controls = true;
        videoElement.autoPlay = false;
        // 阻止IOS視頻全屏
        videoElement.setAttribute("webkit-playsinline", true);
        videoElement.setAttribute("playsinline", true);
        videoElement.setAttribute("x5-video-player-type",'h5');
        videoElement.setAttribute("x-webkit-airplay",true);
        videoElement.setAttribute("x5-video-orientation","portrait");
        
        videoElement.setAttribute('preload', 'auto');
        videoElement.setAttribute('width', '100%');
        videoElement.setAttribute('height', '100%');
         
        videoElement.style.zInddex = Laya.Render.canvas.style.zIndex + 1;      
        videoElement.type = "vedio/mp4";     
        videoElement.src = "視頻鏈接"
        videoElement.play();
        divElement.appendChild(videoElement);  
    }

    videoEvent(){ 
        this.videoElement.addEventListener("loadstart",()=>{
            //加載事件
        });   
         this.videoElement.addEventListener("progress",()=>{
            //下載監聽事件
        });
         this.videoElement.addEventListener("play",()=>{
            //播放事件
        });
         this.videoElement.addEventListener("pause",()=>{
            //暫停事件
        });
         this.videoElement.addEventListener("seeking",()=>{
            //移動進度條事件
        });
         this.vidjingeoElement.addEventListener("seeked",()=>{
            //進度條移動完成事件
        });
         this.videoElement.addEventListener("waiting",()=>{
            //視頻加載等待事件
        });
         this.videoElement.addEventListener("timeupdate",()=>{
            //視頻實時更新進度事件
        });
        this.videoElement.addEventListener("ended",()=>{
            //播放完成事件
        });
        this.videoElement.addEventListener("error",()=>{
            //播放出錯
        });
        
    }


    
}

var videoele = new Video();
Laya.stage.addChild(videoele);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM