H5播放器的实现

一、说到视频播放器就要谈谈Flash和H5有哪些不同

Flash是Adobe 那个公司出的一个浏览器插件，可以做游戏，h5是最近“新的互联网新一代HTML5标准，h5游戏目前来说数量比较少，会火热，简单来说h5比flash新，也可以替代之

HTML5的优点主要在于，开发周期短，开发成本低，且可以跨平台使用。与Flash技术相比，H5技术不但不需要插件、而且还是开发免费，以及对搜索引擎友好等特点更适应移动端开发的特点深受广大开发者的喜爱。

1.相对来说, HTML5更有市场。H5是较之更加新的技术, Flash则始终多年不曾进步。
2. Flash加载难度大, H5加载速度快。
3. H5页面兼容性更强,易用性也是更强。html5可以与HTML、 CSS, DOM. JS无缝结合。
4. Flash需要软件支持，应用环境窄。浏览器支持html5顺理成章,无需第三方插件。用户是有惰性的，浏览器自己支持最好了。
5. H5页面更加容易融入微信等移动平台,现在微信所拥有的市场份额非常巨大。
6. Adobe Flash漏洞n多,而且绝大多数相当严重,可以导致用户被种植木马。而html5相对来说少 一些。
7.学习Flash开发需要成本,而htm15与原本熟悉的HTML语法非常类似,无需花更多的成本去研习。

二、H5取代FLASH 的部分

Flash被h5取代的方面：
		1. 动画                 <canvas></canvas>   + 定时器
		2. 音频和视频            <video></video>    <audio></audio>
		3. 绘图                 <canvas></canvas>
		4. 统计图表              <canvas></canvas>   <svg></svg>
		5. 客户端数据存储    		webstorage

三、H5多媒体属性及其API

视频格式：ogg,mp4,webm
   	音频格式：mp3,wav,ogg	
   	用于播放视频，默认的300*150
	   	1. 属性：
	   		autoplay:自动播放     自动播放在浏览器中会被禁用，但是在静音状态下可以自动播放
	   		muted : 设置静音
	   		controls : 控件      不同浏览器显示出来的功能不一样
	   		loop  : 是否循环播放
	   		poster : 视频播放前的预览图片   谷歌中一闪而过
	   		preload : 视屏预加载方案	auto : 视频的宽高  时长  第一帧内容  默认 有一定的缓冲时长 
								  	metadata : 视频的宽高  时长  第一帧内容 
								  	none : 不预加载任何内容
	   		
	   	2. js控制的：	
	   		ended : 是否播放到结束
	   		paused : 当前是否处于暂停状态
	   		currentTime : 播放到的当前时间
	   		duration : 影片的总时长
	   		muted
	   		
	   	3. video支持的方法
	   		play()  开始播放
	   		pause()  暂停播放

四、H5实现多媒体进度条

1. ontimeupdate 事件在视频/音频（audio/video）当前的播放位置发送改变时触发。
		2. 该事件通过以下方式调用：
			播放视频/音频（audio/video）
			重新定位视频/音频（audio/video）的播放位置。
		3. 提示： 	
			该事件通常与 Video 对象的 currentTime 属性一起使用， 
			该属性返回视频/音频（audio/video）的当前播放位置。
		4. ontimeupdate 事件监听:			
	   		duration : 总时长
	   		currentTime ： 动态时长
	   		v1.currentTime / v1.duration).toFixed(3) * 100;		// 当前市场占总时长百分比

五、项目实例

实现方式：

<div class="main">
		<video id="v1" src="birds.mp4" preload="auto" preload="auto"></video>
			<div id="mark">
			</div>
			<img src="clothes04.jpg" id="img2">
			<img src="play02.png" id="img1">
			<img src="play.png" id="btn2">
			<div id="Progressbar"><div id="lvdong"></div><span id="bftime"></span></div>
			
	</div>
	<script type="text/javascript">
		var img1 = document.getElementById("img1");
		var img2 = document.getElementById("img2");
		var btn2 = document.getElementById("btn2");
		var mark = document.getElementById("mark");
		var bftime = document.getElementById("bftime");
		var lvdong = document.getElementById("lvdong");
		var v1 = document.getElementById("v1");
		var main = document.getElementsByClassName("main")[0];

		//分秒取整，转换时间格式例如00:00/00:10
		function timer(cctime){
			var min = parseInt(cctime / 60);
			var sec = parseInt(cctime % 60);
			min = min >= 10 ? min : '0' + min; 
			sec = sec >= 10 ? sec : '0' + sec;
			return min+':'+sec;
		}
		//未播放获取总时长
		v1.oncanplay = function(){
			bftime.innerText = "00:00" + '/' + timer(v1.duration);
		} 
		//实时获取播放时长
		v1.ontimeupdate = function(){
			bftime.innerText = timer(v1.currentTime) + '/' + timer(v1.duration);
			var bfb = ( v1.currentTime / v1.duration).toFixed(3)*100;
			lvdong.style.width = bfb + '%';
			if(v1.ended){
				v1.pause();
				img1.src = "play02.png";
				btn2.src = "play.png";
				mark.style.display = 'block';
				img2.style.display = 'block';
			}
		}  
		img1.onclick = function (){
			if(v1.paused){
				v1.play();
				img1.src = "pause02.png";
				btn2.src = "pause.png";
				mark.style.display = 'NONE';
				img2.style.display = 'NONE';
			}else {
				v1.pause();
				img1.src = "play02.png";
				btn2.src = "play.png";
				mark.style.display = 'block';
				img2.style.display = 'block';
			}
		}
		btn2.onclick = img1.onclick;
		main.onmouseenter = function(){
			img1.style.display = 'block';
			btn2.style.display = "block";
		}
		main.onmouseleave = function(){
			img1.style.display = 'none'; 
			btn2.style.display = "none";
		}
	</script>