前端h5和小程序直播--video详解

此文章记载学习的一些笔记 有问题可以交流

前端直播–video详解

属性

基础用法

autoplay	如果出现该属性，则视频在就绪后马上播放。

controls   如果出现该属性，则向用户显示控件，比如播放按钮。

height	pixels	设置视频播放器的高度。

loop	        循环播放。

muted	muted	   静音。

poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。

preload	preload	预加载。如果使用 "autoplay"，则忽略该属性。

src	url	要播放的视频的 URL。

width	pixels	设置视频播放器的宽度。

controlslist="nodownload  nofullscreen"  （控制条的一些操作）     不让下载   不让全屏

稍微高级得用法

volume(要用js控制,先获取节点    值为0-1)   音量控制

currentTime(要用js控制,先获取节点    单位为秒)   播放时间控制

src (要用js控制,先获取节点  )    地址切换   高清换超清什么的都是这么做的。如果错误了  采取另外得方式

**     //这一块是备用地址切换    可以多个source   现在取src 要用currentSrc

事件

**loadstart**           视频开始播放得时候触发得事件 （视频查找）  不常用

**durationchange**         监听时间得变化  初始化得时候duration是NaN   v.duration拿到视频得时长，可能只能拿到一部分，跟视频得格式有关系。

**loadedmetadata**         表示元数据已经下载完成     

**loadeddata**         	没有足够的事件

**progress**             下载

**canplay**                可播放监听   就是可以播放了

**canplaythrough**     可以播放        在这就可以监听播放暂停了

**play**                       点击播放按钮   从暂停到播放就会触发

**pause**                    点击暂停按钮    从播放到暂停就会触发

**seeking**                点击进度条某个点    只是一点击就会触发seeking    还不可播放

**seeked**                  触发查找结束 这次点击结束下载完之后触发    可播放了    ***这个很关键***

**waiting**                 没有足够的数据     在seeked之前   触发的事件

**playing**     		      没有播放到播放会触发     解码完全之后canplay之后    也会触发这个

**timeupdata**           用作播放更新得一个事件      播放会一直触发        ***非常重要***

**ended**                  视频播放结束     多数用在视频结束之后插播一段广告     

**error**                     错误时触发     错误之后浏览器会自带重试机制  

上边是一些video得用法

上一篇：直播原理
下一篇：直播流得制作