シンプルなH5プレーヤーの実装が簡単

1.フラッシュとH5

	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()  暂停播放

3、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;		// 当前市场占总时长百分比

4.例

（1）エフェクト表示一時停止の開始状態（1）エフェクト表示

再生の再生状態

（2）実施方法

	<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>

~~~~~~~~~~~~~~~~~~~ END ~~~~~~~~~~~~~~~~~~~