在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事件

html5 Hls播放m3u8 html5 video player_ico

若是想深入了解详细的属性及相关的知识，可以试着去以下网址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做为列子了...