HTML5中的video插件

在HTML5中，新增了两个元素---video元素与audio元素。video元素专门用来播放网络上的视频或电影，而audio元素专门用来播放网络上的音频数据。使用这两个元素，就不在需要使用其他插件了，只需要支持HTML5的浏览器即可。今天，我们在这里就详细的说说video元素

它（video）的作用是用于播放视频。它所主要支持的文件格式有webm、ogg、MP4、MP3、WAVE。

它的用法如下

<video width="640" height="360">
  <source src="video/xxxx.ogv"></source>
  <source src="video/xxxx.mov"></source>
</video>

它的属性我们可以浅易了解

属性	描述
controls	显示或隐藏用户控制界面
autoplay	媒体是否自动播放
Loop	媒体是否循坏播放
currentTime	开始到播放现在所用的时间
duration	媒体总时间(只读)
volume	0.0-1.0的音量相对值
muted	是否静音
autobuffer	开始的时候是否缓存加载,autoplay加载的时候可以忽略次属性。

       注意:video标签拥有着额外的属性

poster	视频播放器的预览图片
Width,height	设置视频的尺寸
videoWidth,videoHeight	视频实际尺寸

 

注意:如果想读取duration()总时长，必须监听canplay事件

若是想深入了解详细的属性及相关的知识，可以试着去以下网址https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video

在用到video元素的时候，我们经常会用到以下三种方法

方法	描述
media.paly()	视频播放
media.pause()	暂停视频
media.load()	重新加载视频

使用列子代码如下：

oPlay.onclick = function(){        //oPlay指开始按钮
				if(oAudio.paused){    //oAudio指在JS中获取的audio（音频元素）或video（视频元素）
					oAudio.play()
					oPlay.innerHTML = '<i class="iconfont icon-iconstop"></i>'
					
				}else {
					oAudio.pause()
					oPlay.innerHTML = '<i class="iconfont icon-bofang"></i>'
				}
			}

除了这三种方法，在利用video元素或audio元素读取或播放媒体数据时，会触发一系列的事件。如果使用javascript脚本捕获事件，就可以对这些事件处理，我们常常要利用 addEventListener 方法VideoElement.addEventListener(type,listener,useCaptrue)

       VideoElement表示页面的video或audio元素;type表示事件名称,listener表示绑定的函数，useCaptrue是一个布尔值，表示事件的响应顺序,该值如果是true，浏览器采用captrue响应方式,如果为false，浏览器采用budding响应方式，默认情况为false。

 

canplay：媒体元素能够播放触发

ontimeupdate:监听媒体元素进度条事件

一、转化时长

oAudio.addEventListener("canplay",function(){  //addEventListener() 方法用于向指定元素添加事件句柄 这里，canplay为指定元素。
				oTotal.innerHTML = getMin(this.duration)	//duration可以获取当前事件持续时长
			})

二、监听进度变化

oAudio.ontimeupdate = function(){                    //ontimeupdate 当前播放变化时触发事件
				var pre = Math.floor(oAudio.currentTime/oAudio.	duration*200)   //currentTime播放会跳跃到指定的位置。
				oCircle.style.width = pre+"px"
				oStart.innerHTML = getMin(oAudio.currentTime)   //进度条
				oRound.style.left = oCircle.style.width
			}

三、点击进度条变化

oLoad.onclick = function(e){
				var l = e.clientX-oLoad.offsetLeft
				oAudio.currentTime = (l/200)*oAudio.duration  //currentTime播放会跳跃到指定的位置。
				console.log("2+click")
			}

在这我要说明下，因为video的使用方法与audio的使用方法差不多，而我这边恰好有个audio的练习，我就顺手用audio做为列子了...