LayaAir使用原生Video视频播放以及Video监听事件

1.原生Video的基本属性

src ：视频的属性，url地址
poster：视频封面，没有播放时显示的图片
preload：预加载|none|metadata（部分预加载）|auto。默认为auto
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

2.原生video标签隐藏dom元素  ，可隐藏不可以修改

 3.Laya使用原生Video视频播放的类代码如下

1var WebGL = laya.webgl.WebGL;
2Laya.init(600, 400, WebGL);
3
4class Video extends Laya.Sprite{
5    constructor(){
6        super();
7        this.creatVideo();
8    }
9
10    creatVideo(){
11        let divElement = Laya.Browser.createElement("div");
12        divElement.className = "div";
13        Laya.Browser.document.body.appendChild(divElement);         
14        Laya.Utils.fitDOMElementInArea(divElement,this , 0, 0, Laya.stage.width, Laya.stage.height); 
15        this.divElement = divElement;
16        // this.divElement.style.display = "none";
17
18        // 创建Video元素
19        let videoElement = Laya.Browser.createElement("video");
20        videoElement.setAttribute("id", "myvideo");
21        this.videoElement = videoElement;      
22        videoElement.controls = true;
23        videoElement.autoPlay = false;
24        // 阻止IOS视频全屏
25        videoElement.setAttribute("webkit-playsinline", true);
26        videoElement.setAttribute("playsinline", true);
27        videoElement.setAttribute("x5-video-player-type",'h5');
28        videoElement.setAttribute("x-webkit-airplay",true);
29        videoElement.setAttribute("x5-video-orientation","portrait");
30        
31        videoElement.setAttribute('preload', 'auto');
32        videoElement.setAttribute('width', '100%');
33        videoElement.setAttribute('height', '100%');
34         
35        videoElement.style.zInddex = Laya.Render.canvas.style.zIndex + 1;      
36        videoElement.type = "vedio/mp4";     
37        videoElement.src = "视频链接"
38        videoElement.play();
39        divElement.appendChild(videoElement);  
40    }
41
42    videoEvent(){ 
43        this.videoElement.addEventListener("loadstart",()=>{
44            //加载事件
45        });   
46         this.videoElement.addEventListener("progress",()=>{
47            //下载监听事件
48        });
49         this.videoElement.addEventListener("play",()=>{
50            //播放事件
51        });
52         this.videoElement.addEventListener("pause",()=>{
53            //暂停事件
54        });
55         this.videoElement.addEventListener("seeking",()=>{
56            //移动进度条事件
57        });
58         this.vidjingeoElement.addEventListener("seeked",()=>{
59            //进度条移动完成事件
60        });
61         this.videoElement.addEventListener("waiting",()=>{
62            //视频加载等待事件
63        });
64         this.videoElement.addEventListener("timeupdate",()=>{
65            //视频实时更新进度事件
66        });
67        this.videoElement.addEventListener("ended",()=>{
68            //播放完成事件
69        });
70        this.videoElement.addEventListener("error",()=>{
71            //播放出错
72        });
73        
74    }
75
76
77    
78}
79
80var videoele = new Video();
81Laya.stage.addChild(videoele);