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

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

前端直播–video详解

属性

基础用法

<video src="./text.mp4" width="400" height="225" controls></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控制,先获取节点  )    地址切换   高清换超清什么的都是这么做的。如果错误了  采取另外得方式

*<video controls width="400" height:"225">
	<source src="备用地址" type="video/mp4">
</video>*     //这一块是备用地址切换    可以多个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得用法

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