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

Stella981
• 阅读 717

1.原生Video的基本属性

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

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

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

 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);
点赞
收藏
评论区
推荐文章
Easter79 Easter79
2年前
uni app video、视频播放开发
视频播放有3种解决方案,使用HTML5的自带video、从HBuilder9.1.3起新增的plus.video的原生视频播放,以及使用Native.js。1.HTML5自带video标签,可以播放符合HTML5规范的视频格式。注意不含flv、ra等三方商业公司的规范格式。HTML5的video在Android上有较多浏览
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Easter79 Easter79
2年前
vue video全屏播放
需求:1、视频为长方形,页面初始化打开为横屏全屏播放视频。2、微信不支持自动播放,故自动播放需求删除。方法:1、vuevideoplayer插件因需求较简单,仅要求播放本地一个视频,故未选择使用插件。2、video<divid"video_box"style"zindex:999;":cl
Jacquelyn38 Jacquelyn38
2年前
从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)
前言话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器。我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那么丑。其实像那些网站都是基于原生video标签进行开发的,只不过还得适当加工一下,才会有我们所看到的漂亮的视频播放器。开发在具体开发之前,我们需要明确我们需要做什
Stella981 Stella981
2年前
Javascript判断Video视频播放、暂停、结束完成及获取长度事件监听处理
在日常应用场景中,可能会遇到这么一个情况,需要判断用户是否完整的观看完了一部视频,在这个场景中,和视频相关的事件大体涉及到几个部分,获取视频长度,视频开始播放,暂停播放和播放结束,下面来看下如何通过JavaScript来监听获取视频的这几种状态。html页面视频标签大体如下:<video id\"video" controls\"controls
Wesley13 Wesley13
2年前
HTML 5 视频
Web上的视频直到现在,仍然不存在一项旨在网页上显示视频的标准。今天,大多数视频是通过插件(比如Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。HTML5规定了一种通过video元素来包含视频的标准方法。视频格式当前,video元素支持三种视频格式:格式IEFirefox
Wesley13 Wesley13
2年前
v4l2视频采集
1.打开视频设备 intcameraFdopen("/dev/video0",O\_RDWR|O\_NONBLOCK,0);2.设定视频设备属性及采集方式 intioctl(int\_\_fd,unsignedlongint\_\_request,.../\args\/); VIDIOC\_RE
Wesley13 Wesley13
2年前
video 铺满父元素(object
 遇到这个属性,是在给video嵌入一个div时,导致video播放器上下有灰色。在控制台查看video默认样式的时候看到了这个属性。!(https://oscimg.oschina.net/oscnet/c205babf0fc5ff45bb1f1b4bebbef684d2a.jpg)播放器上下的灰色,不是我们想要的样式,如果能完全覆盖就更好了。
Stella981 Stella981
2年前
H5中video使用
<divid"video"src""controls"true"poster""preload"auto"webkitplaysinline"true"</div属性介绍:1)src:视频地址2)controls:Gecoko会提供用户控制,允许用户控制视频的播放,包括音量,跨
Wesley13 Wesley13
2年前
video 标签存在的一些坑
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置高度,视频的容器在安卓手机上会被视频的封面撑大到变形<videoclass"videosource"width"10